ExtJS.Grid上的总结+ajax分页

Question

我有一个网格，其数据类似于 http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/array-grid.html，但使用类似于 http:// 的分页代理dev.sencha.com/deploy/ext-4.0.1/examples/grid/paging.html.

我需要添加类似于http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/group-summary-grid.html的摘要，只有1位于网格底部。它必须对所有数据求和，而不仅仅是当前页面的数据。

我可以进行数据库查询，不需要 Ext 对值求和。但是我如何将摘要数据发送到 Ext.store 并从商店发送到网格？

Answer 1

将此作为如何实施的示例。

这就是它的样子（当然它会是不同的数据，但你明白这一点）：

让我们看看 json 的示例（它可能是什么样以及我如何理解你的问题）：

{
   "stats":[
      {
         "name":"Amount summary",
         "value":"2300"
      },
      {
         "name":"Mortgage",
         "value":"1100"
      }
   ],
   "success":true,
   "totalCount":2,
   "items":[
      {
         "Amount":"1000",
         "Delta":"3",
         "Mortgage":"500"
      },{
         "Amount":"1300",
         "Delta":"4",
         "Mortgage":"600"
      }
   ]
}

型号：

Ext.define('Application.model.MyModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'Amount',
        type: 'string'
    },{
        name: 'Delta',
        type: 'string'
    },{
        name: 'Mortgage',
        type: 'string'
    }]
});

商店：

var writer = new Ext.data.JsonWriter({
    type: 'json',
    encode: false,
    listful: true,
    writeAllFields: true,
    returnJson: true
});

var reader = new Ext.data.JsonReader({
    type: 'json',
    totalProperty: 'totalCount',
    rootProperty: 'items',
    successProperty: 'success'
});

var proxy = new Ext.data.HttpProxy({
    reader: reader,
    writer: writer,
    type: 'ajax',
    url: 'urlForJson',
    headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    }
});

Ext.define('Application.store.MyStore', {
    extend  : 'Ext.data.Store',
    storeId : 'MyStore',
    model   : 'Application.model.MyModel',
    autoLoad: false,
    autoSync: true,
    proxy:proxy
});

让我们定义将处理我们的摘要/统计数据的控制器：

Ext.define('Application.controller.SummaryController', {
    extend: 'Ext.app.Controller',
    refs: [
        {
            selector: 'summaryPanel',
            ref: 'summaryPanel'
        }
    ],
    init: function () {
        var controller = this;
        controller.listen({
            controller: {
                '*': {
                    addSummary: 'addSummary'
                }
            }
        });
    },

    /**
     * Add summary.
     */
    addSummary: function addSummary(summary) {
        var controller = this;
        var summaryPanel= controller.getSummaryPanel();
        summaryPanel.removeAll();
        Ext.Object.each(stats, function(property, stat){
            var labelFieldName = new Ext.form.Label({
                text: stat.name+': '
            });
            var labelFieldValue = new Ext.form.Label({
                text: stat.value+'  ',
                cls: 'bold-item'
            });
            summaryPanel.items.add(labelFieldName);
            summaryPanel.items.add(labelFieldValue);
        });
        summaryPanel.up('window').doLayout();
    }
});

这是我们的SummaryPanel：

Ext.define('Application.view.SummaryPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.summaryPanel',
    xtype: 'summaryPanel',
    layout: 'anchor',
    bodyStyle: 'padding: 5px 5px;',
    items: []
});

在下一步中，我们将把数据加载到网格中，之后我们将用统计/摘要填充我们的

SummaryPanel

：

Ext.define('Application.controller.GridController', {
    extend: 'Ext.app.Controller',
    init: function () {
        var controller = this;

        controller.control({
            'gridControlPanel': {
                'afterrender': function () {
                    controller.loadStore();
                }
            }
        })
    },
    loadStore: function () {
        var controller = this;
        var store = Ext.getStore('Application.store.MyStore');
        store.load({
            callback: function (records, operation, success) {
                var data = Ext.JSON.decode(operation._response.responseText);

                if (!Ext.isEmpty(data.stats)) {
                    //After loading data, make statistics.
                    controller.fireEvent('addSummary', data.stats);//This event is handled by SummaryController
                }
            }
        });
    }
});

这个

UI

涵盖了以上所有内容：

Ext.define('Application.view.GridWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.gridWindow',
    xtype: 'gridWindow',
    addMode: false,
    autoShow: true,
    width: 1200,
    height: 700,
    resizable: true,
    layout: 'fit',
    items: [{
        xtype: 'grid',
        store: 'Application.store.MyStore',
        dockedItems: [{
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            store: 'Application.store.MyStore',
            displayInfo: true
        }]
    }],
    dockedItems: [{
        xtype: 'summaryPanel'//This is our summary panel that will show your summarize.
    }]
});

Answer 2

您可以使用 ExtJS 网格功能 -

Ext.grid.feature.Summary

在网格底部显示摘要。

这是回答您问题的简单示例 - https://fiddle.sencha.com/#fiddle/tq7

例如，我直接使用了列的

summary

中的

summaryRenderer

对象。

Answer 3

因此，对于摘要行，您拥有摘要功能。您可以使用

dock: 'bottom'

选项将其粘贴在网格底部。最后，要使用远程计算的数据进行摘要，您可以使用

remoteRoot

选项。瞧。

...除了这件事显然是半生不熟，而且

remoteRoot

实际上只与分组一起使用。哎呀。他们一定这么想：“不需要处理简单的案件”。

这是一个覆盖，可以填补您需要的缺失部分（fiddle）：

Ext.define('Ext.grid.feature.RemoteSummary', {
    override: 'Ext.grid.feature.Summary',

    // adds 'remote' summary type
    getSummary: function (store, type, field, group) {
        if (type === 'remote') {
            return this.getRemoteSummaryRecord(store).get(field);
        } else {
            return this.callParent(arguments);
        }
    },

    // helper for our custom summary type, mainly copied from:
    // http://docs.sencha.com/extjs/4.2.3/source/AbstractSummary.html#Ext-grid-feature-AbstractSummary-method-generateSummaryData
    getRemoteSummaryRecord: function(store) {
        if (!this.remoteSummaryRecord) {
            var reader = store.proxy.reader,
                remoteRoot = this.remoteRoot,
                root;

            if (remoteRoot && reader.rawData) {
                root = reader.root;
                reader.root = remoteRoot;
                reader.buildExtractors(true);

                this.remoteSummaryRecord = reader.read(reader.rawData).records[0];

                if (!reader.convertRecordData) {
                    reader.buildExtractors();
                }

                reader.root = root;
                reader.buildExtractors(true);
            }
        }
        if (!this.remoteSummaryRecord) {
            this.remoteSummaryRecord = store.model.create({});
        }
        return this.remoteSummaryRecord;
    },

    // ensure our remoteSummaryRecord stays fresh
    onStoreUpdate: function() {
        delete this.remoteSummaryRecord;
        return this.callParent(arguments);
    }
});

然后你可以像这样使用它：

Ext.create('Ext.grid.Panel', {
    features: [{
        ftype: 'summary',
        remoteRoot: 'summary', // summary key in the server response
        dock: 'bottom'
    }],
    columns: [{
        text: 'Age',
        dataIndex: 'age',
        summaryType: 'remote'
    }]
    //...
});

使用这种形式的一些数据：

{
    "summary": {
        "age": 95,
    },
    "items": [/*...*/]
}

（而且，是的，求和年龄很有意义）