[ExtJS5學習筆記]第三十節 sencha extjs 5表格gridpanel分組匯總 · 利劍Extjs5

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/42240531](http://blog.csdn.net/sushengmiyan/article/details/42240531) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 本文以一個實際例子，使用了extjs的gridpanel中的分組統計顯示功能，涉及知識點： Ext.grid.Panel ?model/store store中的data grid中的features以及其中ftype: 'groupingsummary'等一、先看效果圖： ![](https://box.kancloud.cn/2016-02-03_56b214ec3cd83.jpg) 可以看到圖片顯示的安裝月份進行了分組顯示在每個分組下面會有合計和平均值顯示。我這個例子在IE8和谷歌瀏覽器以及火狐瀏覽器下均正常顯示。二、貼上所有的代碼(其實就只有一個jsp頁面就足夠了) ~~~ <%@ page contentType="text/html; charset=UTF-8" %> <% String context = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>報表</title> <script type="text/javascript"> window.context = "<%=context%>"; </script> <script type="text/javascript" src="<%=context %>/extjs5/include-ext.js"></script> <script type="text/javascript" src="<%=context %>/extjs5/packages/ext-locale/build/ext-locale-zh_CN.js"></script> <script type="text/javascript" src="<%=context %>/app/ux/Month.js"></script> </head> <body> <script type="text/javascript" > Ext.onReady(function(){ var data = [{ factory:'第一家維修公司', date:'2014-05', cost:52492.0, costav:52492.0 },{ factory:'第二家維修公司', date:'2014-05', cost:760.0, costav:760.0 },{ factory:'第三家維修公司', date:'2014-05', cost:1807.0, costav:1807.0 },{ factory:'第一家維修公司', date:'2014-06', cost:4921.0, costav:4921.0 },{ factory:'第二家維修公司', date:'2014-06', cost:1020.0, costav:1020.0 },{ factory:'第三家維修公司', date:'2014-06', cost:1637.0, costav:1637.0 },{ factory:'第一家維修公司', date:'2014-07', cost:48150.0, costav:48150.0 },{ factory:'第二家維修公司', date:'2014-07', cost:7940.0, costav:7940.0}]; var store = Ext.create('Ext.data.Store', { fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}], groupField: 'date', data: data }); var grid = Ext.create('Ext.grid.Panel', { frame: true, height: 800, columnLines: true, // 加上表格線 features: [{ id: 'group', ftype: 'groupingsummary', groupHeaderTpl: '{name}'+'月份車輛美容及維修費用', hideGroupedHeader: false, enableGroupingMenu: false }, { ftype: 'summary', summaryType: 'average', dock: 'bottom' }], renderTo: Ext.getBody(), columns: [{ text: '維修時間', dataIndex: 'date',width:100, summaryRenderer: function(value, summaryData, dataIndex) { return '合計'} },{ text: '維修費用(元)', dataIndex: 'cost', width:180, field: { xtype: 'numberfield'}, summaryType: 'sum', renderer: function(value, metaData, record, rowIdx, colIdx, store, view){ return value + ' 元'}, summaryRenderer: function(value, summaryData, dataIndex) { return value + ' 元'} },{ text: '維修廠家', dataIndex: 'factory',width:120, summaryRenderer: function(value, summaryData, dataIndex) { return '平均值'} },{ text: '', dataIndex: 'costav', width:180, field: {xtype: 'numberfield'}, summaryType: 'average', renderer: function(value, metaData, record, rowIdx, colIdx, store, view){ return ''},//這列最后顯示平均值暫時這樣轉換顯示 summaryRenderer: function(value, summaryData, dataIndex) { return value + ' 元'} }], store: store }); grid.show(); }); </script> </body> </html> ~~~ 這個隨便起名一個jsp就可以啦。里面使用了一個日期選擇控件，只可以選擇年月的。順便也貼一下代碼吧 ~~~ /**Months picker 重寫 field.Date **/ Ext.define('app.ux.Month', { extend:'Ext.form.field.Date', alias: 'widget.monthfield', requires: ['Ext.picker.Month'], alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'], selectMonth: null, createPicker: function() { var me = this, format = Ext.String.format; return Ext.create('Ext.picker.Month', { pickerField: me, ownerCt: me.ownerCt, renderTo: document.body, floating: true, hidden: true, focusOnShow: true, minDate: me.minValue, maxDate: me.maxValue, disabledDatesRE: me.disabledDatesRE, disabledDatesText: me.disabledDatesText, disabledDays: me.disabledDays, disabledDaysText: me.disabledDaysText, format: me.format, showToday: me.showToday, startDay: me.startDay, minText: format(me.minText, me.formatDate(me.minValue)), maxText: format(me.maxText, me.formatDate(me.maxValue)), listeners: { select: { scope: me, fn: me.onSelect }, monthdblclick: { scope: me, fn: me.onOKClick }, yeardblclick: { scope: me, fn: me.onOKClick }, OkClick: { scope: me, fn: me.onOKClick }, CancelClick: { scope: me, fn: me.onCancelClick } }, keyNavConfig: { esc: function() { me.collapse(); } } }); }, onCancelClick: function() { var me = this; me.selectMonth = null; me.collapse(); }, onOKClick: function() { var me = this; if( me.selectMonth ) { me.setValue(me.selectMonth); me.fireEvent('select', me, me.selectMonth); } me.collapse(); }, onSelect: function(m, d) { var me = this; me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]); } }); /**Months picker **/ ~~~ 知識點梳理： ①。顯示的數據，這里整理好了一些數據，在實際中，我們可以通過查詢數據庫獲取，分組查詢便可。 ~~~ var data = [{ factory:'第一家維修公司', date:'2014-05', cost:52492.0, costav:52492.0 },{ factory:'第二家維修公司', date:'2014-05', cost:760.0, costav:760.0 },{ factory:'第三家維修公司', date:'2014-05', cost:1807.0, costav:1807.0 },{ factory:'第一家維修公司', date:'2014-06', cost:4921.0, costav:4921.0 },{ factory:'第二家維修公司', date:'2014-06', cost:1020.0, costav:1020.0 },{ factory:'第三家維修公司', date:'2014-06', cost:1637.0, costav:1637.0 },{ factory:'第一家維修公司', date:'2014-07', cost:48150.0, costav:48150.0 },{ factory:'第二家維修公司', date:'2014-07', cost:7940.0, costav:7940.0}]; ~~~ ②store數據交互 ~~~ var store = Ext.create('Ext.data.Store', { fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}], groupField: 'date', data: data }); ~~~ 這里只需要指定一個groupField就可以了，只需要這一步。 ③。grid主體 ~~~ var grid = Ext.create('Ext.grid.Panel', { frame: true, height: 800, columnLines: true, // 加上表格線 features: [{ id: 'group', ftype: 'groupingsummary', groupHeaderTpl: '{name}'+'月份車輛美容及維修費用', hideGroupedHeader: false, enableGroupingMenu: false }, { ftype: 'summary', summaryType: 'average', dock: 'bottom' }], renderTo: Ext.getBody(), columns: [{ text: '維修時間', dataIndex: 'date',width:100, summaryRenderer: function(value, summaryData, dataIndex) { return '合計'} },{ text: '維修費用(元)', dataIndex: 'cost', width:180, field: { xtype: 'numberfield'}, summaryType: 'sum', renderer: function(value, metaData, record, rowIdx, colIdx, store, view){ return value + ' 元'}, summaryRenderer: function(value, summaryData, dataIndex) { return value + ' 元'} },{ text: '維修廠家', dataIndex: 'factory',width:120, summaryRenderer: function(value, summaryData, dataIndex) { return '平均值'} },{ text: '', dataIndex: 'costav', width:180, field: {xtype: 'numberfield'}, summaryType: 'average', renderer: function(value, metaData, record, rowIdx, colIdx, store, view){ return ''},//這列最后顯示平均值暫時這樣轉換顯示 summaryRenderer: function(value, summaryData, dataIndex) { return value + ' 元'} }], store: store }); ~~~ 這里需要注意，1.需要給grid指定高度，如果不指定IE8下數據不顯示,應該是個bug吧。 2.分組以及統計的關鍵 ~~~ features: [{ id: 'group', ftype: 'groupingsummary',//分組統計，可以選擇不分組的，各類型可以去API查找 groupHeaderTpl: '{name}'+'月份車輛美容及維修費用',//標題而已 hideGroupedHeader: false, enableGroupingMenu: false }, { ftype: 'summary',//下方的匯總的 summaryType: 'average',//類型是求平均值，還有sum等，可以去API查找 dock: 'bottom' }], ~~~ OK 就這樣設置，就可以簡單的實現一個分組報表統計了，有求平均值求和等方法。簡單易用