ExtJS.Grid 上的摘要 + ajax 分页 [英] Summary + ajax paging on ExtJS.Grid

问题描述

我有一个类似于

让我们看看 json 的例子(它可能是如何以及我如何理解你的问题):

<代码>{统计":[{"name":"金额汇总",价值":2300"},{"name":"抵押贷款",价值":1100"}],成功":真，总计数":2，项目":[{"金额":"1000","德尔塔":"3",抵押贷款":500"},{"金额":"1300","德尔塔":"4",抵押贷款":600"}]}

模型:

Ext.define('Application.model.MyModel', {扩展:'Ext.data.Model'，字段:[{name: '金额',类型:'字符串'},{名称:'三角洲'，类型:'字符串'},{name: '抵押贷款',类型:'字符串'}]});

商店:

var writer = new Ext.data.JsonWriter({类型:'json'，编码:假，列表:真实，writeAllFields: 真,returnJson: 真});var reader = new Ext.data.JsonReader({类型:'json'，totalProperty: 'totalCount',根属性:'项目'，成功属性:'成功'});var proxy = new Ext.data.HttpProxy({读者:读者，作家:作家，类型:'阿贾克斯'，url: 'urlForJson',标题:{'内容类型':'应用程序/json;字符集=UTF-8'}});Ext.define('Application.store.MyStore', {扩展:'Ext.data.Store'，storeId : '我的商店',模型:'Application.model.MyModel'，自动加载:假，自动同步:真，代理:代理});

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

Ext.define('Application.controller.SummaryController', {扩展:'Ext.app.Controller'，参考: [{选择器:'summaryPanel'，参考:'摘要面板'}],初始化:函数(){var 控制器 = 这个；控制器.听({控制器: {'*':{addSummary: 'addSummary'}}});},/*** 添加摘要.*/addSummary: 函数 addSummary(summary) {var 控制器 = 这个；var summaryPanel= controller.getSummaryPanel();summaryPanel.removeAll();Ext.Object.each(stats, function(property, stat){var labelFieldName = new Ext.form.Label({文本:stat.name+':'});var labelFieldValue = new Ext.form.Label({文本:stat.value+' ',cls: '粗体'});summaryPanel.items.add(labelFieldName);summaryPanel.items.add(labelFieldValue);});summaryPanel.up('window').doLayout();}});

这是我们的SummaryPanel:

Ext.define('Application.view.SummaryPanel', {扩展:'Ext.Panel'，别名:'widget.summaryPanel',xtype: '摘要面板',布局:'锚'，bodyStyle: 'padding: 5px 5px;',项目: []});

下一步，我们要将数据加载到网格，然后我们将用统计信息/摘要填充我们的SummaryPanel:

Ext.define('Application.controller.GridController', {扩展:'Ext.app.Controller'，初始化:函数(){var 控制器 = 这个；控制器.控制({'网格控制面板':{'afterrender':函数(){控制器.loadStore();}}})},加载存储:函数(){var 控制器 = 这个；var store = Ext.getStore('Application.store.MyStore');商店加载({回调:函数(记录，操作，成功){var data = Ext.JSON.decode(operation._response.responseText);如果 (!Ext.isEmpty(data.stats)) {//加载数据后，进行统计.controller.fireEvent('addSummary', data.stats);//这个事件由SummaryController处理}}});}});

而这个UI涵盖了以上所有内容:

Ext.define('Application.view.GridWindow', {扩展:'Ext.window.Window'，别名:'widget.gridWindow',xtype: 'gridWindow',添加模式:假，车展:真，宽度:1200，高度:700，可调整大小:真实，布局:'适合'，项目: [{xtype: '网格',商店:'Application.store.MyStore'，停靠项目:[{xtype: '分页工具栏',码头:'底部'，商店:'Application.store.MyStore'，显示信息:真}]}],停靠项目:[{xtype: 'summaryPanel'//这是我们的摘要面板，将显示您的摘要.}]});

I have a grid with data similar to http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/array-grid.html, but using paged proxy similar to http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/paging.html.

I need to add a summary similar to http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/group-summary-grid.html, only 1 at the bottom of the grid. It must sum all data, not only data from current page.

I can make the DB query, no need Ext to sum the values. But how will I send the summary data to Ext.store and from store to grid?

解决方案

Handle this as example how you could implement.

This is how it looks like(of course it will be different data but you see the point):

Lets see example of json(how it could be and how i understand your problem):

{
   "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"
      }
   ]
}

Model:

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

Store:

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
});

Lets define controller that is going to handle our summary/statistics:

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();
    }
});

And this is our SummaryPanel:

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

In next step we are going to load our data to grid and after that we will fill our SummaryPanel with statistics/summary:

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
                }
            }
        });
    }
});

And this UI that cover all above:

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 上的摘要 + ajax 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！