Extjs中Grid分页汇总全部数据的合计----通过服务器端汇总发到前台显示

一、前台部分

1、view

                Ext.define('app.view.statmag.iostat.region.SearchGrid', {
                    extend: 'Ext.grid.Panel',
                    alias: 'widget.iostatSearchGrid',
                    features: [{
                        ftype: 'summary',
                        remoteRoot: 'remoteRoot'//后台提供数据的路径
                    }],


                    dockedItems: [{
                        xtype: 'pagingtoolbar',
                        bind: {
                            store: '{ioStatStore}'
                        },
                        dock: 'bottom',
                        displayInfo: true,
                        firstText: '第一页',
                        lastText: '最后一页',
                        prevText: '上一页',
                        nextText: '上一页',
                        refreshText: '刷新',
                        beforePageText: '跳转至',
                        afterPageText: '页， 共 {0} 页',
                        displayMsg: '当前 第{0}-{1} 条 / 共 {2} 条',
                        emptyMsg: "没有数据"
                    }],
                    bind: {
                        store: '{ioStatStore}'
                    },
                    columns: [{xtype: 'rownumberer', text: '序号', align: 'center', width: 40},
                        {
                            header: '项目名称', width: 150, align: 'center', dataIndex: 'itemname',
                            summaryType: 'count',
                            summaryRenderer: function (value, summaryData, dataIndex) {
                                return Ext.String.format('合计： {1}', value, value !== 0 ? value : '');
                            }
                        },
                        {
                            header: '数量',
                            width: 100,
                            align: 'center',
                            dataIndex: 'amount',
                            summaryType: 'sum',
                            xtype: 'numbercolumn',
                            format: window.AmountDigitFormat,
                            summaryRenderer: : function (value, summaryData, dataIndex) {
                                if(value)
                                    return parseFloat(value).toFixed(window.AmountDigit);//AmountDigit小数位数
                                else
                                    return parseFloat(0).toFixed(window.AmountDigit);
                            }
                         }, 
                         {
                            header: '金额',
                            width: 100,
                            align: 'center',
                            dataIndex: 'money',
                            summaryType: 'sum',
                            xtype: 'numbercolumn',
                            format: window.MoneyDigitFormat,
                            summaryRenderer: function (value, summaryData, dataIndex) {
                                if(value)
                                    return parseFloat(value).toFixed(window.MoneyDigit);
                                else
                                    return parseFloat(0).toFixed(window.MoneyDigit);
                            }
                        }
                    ],
                    stripeRows: true, // 行分隔符
                    columnLines: true, // 列分隔符
                    loadMask: true, // 加载时的遮罩
                    frame: false
                });

 

2、Store

                    Ext.define('app.viewmodel.statmag.StatViewModel', {
                        alias: 'viewmodel.stat',
                        requires: ['app.model.statmag.IOStat'],
                        stores: {
                            //配件出入库汇总表
                            ioStatStore: {
                                storeId: 'ioStatStore:',
                                model: 'app.model.statmag.IOStat',
                                autoDestroy: true,
                                proxy: {
                                    type: 'ajax',
                                    url: 'Stat/findIOStat.do',
                                    reader: {
                                        type: 'json',
                                        rootProperty: 'root',
                                        totalProperty: 'total'
                                    }
                                }
                            }
                        }
                    });

二、后台部分

                                 @RequestMapping("/findIOStat")
                                public void findIOStat(IOStat ioStat, HttpServletResponse response) {
                                    try {


                                          List<IOStat> list = statService.findIOStat(ioStat);
                                          int total = statService.countAllIOStat(ioStat);
                                          
                                          IOStat footer = statService.getRemoteRoot(ioStat);//合计行数据汇总,关键所在
          
                                        JSONArray jsonArray = new JSONArray();
                                        if (list.size() > 0) {
                                        jsonArray = JSONArray.fromObject(list);
                                        }
                                        JSONObject jsonObject = new JSONObject();
                                        if (footer != null) {
                                        jsonObject = JSONObject.fromObject(footer);
                                        }
                                        String jsonString = "{\"success\":true,\"total\":" + total + ",\"root\":"
                                        + jsonArray.toString() + ",\"remoteRoot\":" + jsonObject.toString() + "}";
                                        response.setContentType("text/json;charset=UTF-8");
                                          
                                          PrintWriter out = response.getWriter();
                                      out.print(jsonString);
                           
                                    } catch (Exception e) {
                                        e.printStackTrace();
                                    }
                                }