[ExtJS5 Study Notes] section 30th sencha extjs 5 gridpanel group summary, extjs5gridpanel

[ExtJS5 Study Notes] section 30th sencha extjs 5 gridpanel group summary, extjs5gridpanel

Address: http://blog.csdn.net/sushengmiyan/article/details/42240531

Author: sushengmiyan

Certificate ------------------------------------------------------------------------------------------------------------------------------------

This article uses the grouping statistics display function in the gridpanel of extjs as an example, involving knowledge points:

Features in data grid in Ext. grid. Panel model/store and ftype: 'groupingsummary 'among others

I. First read:

The installation month shown in the image is displayed in groups. The total and average values are displayed under each group. My example is displayed in IE8, Google, and Firefox.

2. paste all the code (in fact, only one jsp page is enough)

<% @ 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"> Just name a jsp.

It uses a date Selection Control to select only the year and month. By the way, paste the code.

/** Months picker overwrites 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 **/

Knowledge Point sorting:

①. The displayed data is sorted out here. In practice, we can query the database and query the data by group.

Var data = [{factory: 'First service company ', date: '2017-05', cost: 2014, costav: 52492.0}, {factory: 'Second service company ', date: '2017-05 ', cost: 2014, costav: 760.0}, {factory: 'Third service company', date: '2017-05 ', cost: 760.0, costav: 1807.0}, {factory: 'First service company ', date: '2017-06', cost: 2014, costav: 4921.0}, {factory: 'Second service company ', date: '2014-06', cost: 2014, costav: 1020.0}, {factory: 'Third service company ', date: '2017-06 ', cost: 2014, costav: 1637.0}, {factory: 'First service company', date: '2017-07 ', cost: 1637.0, costav: 48150.0 },{ factory: 'Second service company ', date: '2017-07', cost: 2014, costav: 7940.0}];

② Store Data Interaction




   var store = Ext.create('Ext.data.Store', {   fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}],                   groupField: 'date',   data: data   });

You only need to specify a groupField.



③. Grid subject

Var grid = Ext. create ('ext. grid. panel ', {frame: true, height: 800, columnLines: true, // Add the table line features: [{id: 'group', ftype: 'groupingsummary', groupHeaderTpl: '{name}' + 'Vehicle beauty and repair cost', hideGroupedHeader: false, enableGroupingMenu: false },{ ftype: 'summary ', summaryType: 'average', dock: 'Bottom '}], renderTo: Ext. getBody (), columns: [{text: 'service time', dataIndex: 'date', width: 100, summaryRenderer: function (value, summaryData, dataIndex) {return 'Total' }},{ text: 'service fee (RMB) ', dataIndex: 'cost', width: 180, field: {xtype: 'numberfield '}, summaryType: 'sum', renderer: function (value, metaData, record, rowIdx, codecomx, store, view) {return value + 'meta'}, summaryRenderer: function (value, summaryData, dataIndex) {return value + 'meta'}, {text: 'service manufacturers', dataIndex: 'factory ', width: 120, summaryRenderer: function (value, summaryData, dataIndex) {return 'average' }},{ text: '', dataIndex: 'costav', width: 180, field: {xtype: 'numberfield '}, summaryType: 'average', renderer: function (value, metaData, record, rowIdx, codecomx, store, view) {return ''}, // The Last display of the average value of this column. For now, the conversion result shows summaryRenderer: function (value, summaryData, dataIndex) {return value + 'meta'}], store: store });

Note: 1. You need to specify the height for the grid. If you do not specify IE8, the data will not be displayed. It should be a bug.

2. Key to grouping and statistics
Features: [{id: 'group', ftype: 'groupingsummary ', // grouping statistics. You can select not grouping. For each type, you can go to the API to find groupHeaderTpl: '{name}' + 'Vehicle beauty and repair cost', // Title Only hideGroupedHeader: false, enableGroupingMenu: false },{ ftype: 'summary ', // The summary summaryType: 'average' below, // The type is average, and sum, etc. You can go to the API to find the dock: 'bottom '}],
OK

In this way, you can simply implement a grouping report statistics method, such as calculating the average value and so on. Easy to use