[ExtJS5 Study Notes] sencha extjs 5 Table gridpanel group summary in section 30th

[ExtJS5 Study Notes] sencha extjs 5 Table gridpanel group summary in section 30th

 

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

<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> <script type = text/javascript> Ext. onReady (function () {var data = [{fac Remark: '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: '2014-06 ', cost: 1020.0, costav: 1637.0}, {factory: 'First service company ', date: '2017-07', cost: 2014, costav: 48150.0}, {factory: 'Second service company ', date: '2017-07 ', cost: 2014, 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, // Add the table line features: [{id: 'group', f Type: '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: 'numbe Rfield '}, summaryType: 'sum', renderer: function (value, metaData, record, rowIdx, codecomx, store, view) {return value + 'meta'}, summaryRenderer: function (value, summaryData, dataIndex) {return value + 'meta' }},{ text: 'service manufacturer ', dataIndex: 'factory', width: 120, summaryRenderer: function (value, summaryData, dataIndex) {return 'average' }},{ text: '', dataIndex: 'costav', width: 180, field: {xtype: 'numberfie Ld '}, 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}); grid. show () ;}); </script> you can 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