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

Source: Internet
Author: User

[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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.