Резюме + пейджинг ajax на ExtJS.Grid

Относитесь к этому как к примеру, как вы могли бы реализовать.

Вот как это выглядит (конечно, это будут другие данные, но вы понимаете): < img src="https://i.stack.imgur.com/VVTsQ.png" alt="введите здесь описание изображения">

Давайте посмотрим на пример 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.
    }]
});

Вы можете использовать функцию ExtJS Grid —

Ext.grid.feature.Summary

для отображения сводки в нижней части сетки.

Вот простой пример ответа на ваш вопрос: https://fiddle.sencha.com/#fiddle/tq7

Например, я напрямую использовал объект summary в столбце summaryRenderer.

Итак, для итоговой строки у вас есть функция Summary. Вы можете вставить его в нижнюю часть сетки с помощью 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": [/*...*/]
}

(И, да, суммирование возрастов имеет большой смысл)