Mzw.tgrid: Ext JS data pivoting table

Original address: http://www.sencha.com/blog/mzpivotgrid-a-pivot-table-for-ext-js? Mkt_tok = 3RkMMJWWfF9wsRokvq3BZKXonjHpfsX77% 2 BsqWK % 2b0lmis % 3D % 3D
At mzSolutions, my job is to create components for Ext JS and Sencha Touch. In this article, I will show you how to use mzw.tgrid in Sencha Ext JS.
What is a pivot table? The Grid panel of Ext JS perfectly displays large datasets and provides many functions. However, it cannot display a type called Pivot table. When it comes to tables, you will use pivot tables, because they help you organize and summarize data and create reports, allowing you to make more informed decisions based on data.
What is mz1_tgrid? MzPivotGrid is a component that can be used in Ext JS to create a pivot table. You can imagine the following situations. Some sales data includes the following fields: country, salesperson, order date, order amount order amoutnt, and order IDorder ID ). To edit the data, you can easily use GridPanel and use the CellEditing or RowEditing plug-in.
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1153104138-0.png "alt =" "/> if you want to answer a series of questions, what do you do:
You can use mzPivotGrid to create these reports. The following figure shows their display effect: 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1153105326-1.png "alt =" "/> 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1153106257-2.png "alt =" "/> 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1153103117-3.png "alt =" "/>
How to Use mzPivotGrid inherits from the Grid panel component of Ext JS. Therefore, you can use familiar functions such as adjusting the column width, locking the column, cell Renderer, and row/cell events. When GridPanel does not provide the aggregation and data pivoting functions, you can use mzPivotGrid to split the dataset based on sales staff and years. You only need to use the following code to set the axis on the top and left:

[Javascript]View plaincopy

1. LeftAxis :[{
2. Width: 80,
3. DataIndex: 'salesperson ',
4. Header: 'salesperson'
5. }],
7. TopAxis :[{
8. DataIndex: 'Year ',
9. Header: 'Year ',
10. Direction: 'asc'
11. }]

Because multiple layers are supported, you can specify them on the top or left axis. It is convenient to group rows or columns. Therefore, you can simply set enableGrouping to true.

Now we have split the dataset in the top and left axes to aggregate the values of cells. Available aggregation includes the following types: Sum, average, minimum, maximum, and count. If these cannot meet your needs, you can provide your own Aggregate functions. [Javascript]View plaincopy

1. Aggregate :[{
2. Measure: 'amount ',
3. Header: 'sales ',
4. Aggregator: 'sum ',
5. Align: 'right ',
6. Width: 85,
7. Renderer: Ext. util. Format. numberRenderer ('20140901 ')
8. },{
9. Measure: 'orderid ',
10. Header: 'qnt ',
11. Aggregator: function (records, measure, matrix, rowGroupKey, colGroupKey ){
12. // Do your own algorithm
13. Return records. length;
14. },
15. Align: 'right ',
16. Width: 85,
17. Renderer: Ext. util. Format. numberRenderer ('20140901 ')
18. }]

As you have noticed in the above example, you can aggregate multiple data fields based on sales and quantity. You can set all the desired sets to easily REDLINE them. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1153103228-4.png "alt =" "/>
The setting of the rows or columns used to display the total rows in grand totals is very simple "enableRowGrandTotals: true" or "enableColGrandTotals: true "). You can also enableRowSummary and enableColSummary. Styles are easy to implement, even by defining the cell Renderer.

Pivot tables can use any type of Store in Ext JS, so it is quite easy to filter data in Store objects. This means that a plug-in can be implemented to process filtering.

The data model class of Ext JS is quite good. It can be used with its powerful convert function to expand the model and break down data within a custom grouping interval. For example:
[Javascript]View plaincopy

1. Fields :[
2. {Name: 'orderid', type: 'int '},
3. {Name: 'salesperson ', type: 'string '},
4. {Name: 'country', type: 'string '},
5. {Name: 'orderdate', type: 'date', dateFormat: 'd/m/Y '},
6. {Name: 'amount ', type: 'int '},
7. {
8. Name: 'person-range ',
9. Convert: function (v, record ){
10. If (/^ [a-j]/I. test (record. get ('salesperson ') return 'a-J ';
11. If (/^ [k-s]/I. test (record. get ('salesperson ') return 'K-s ';
12. If (/^ [t-z]/I. test (record. get ('salesperson ') return't-Z ';
13. Return v;
14. }
15. },{
16. Name: 'Year ',
17. Convert: function (v, record ){
18. Return Ext. Date. format (record. get ('orderdate'), "Y ");
19. }
20. }
21. ]

Shown as follows: 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1153103R7-5.png "alt =" "/>
Example: [Javascript]View plaincopy

1. Var using tgrid = Ext. create ('mz. Using. grid ',{
2. Title: 'grid ',
3. Height: 400,
4. Width: 600,
5. EnableLocking: false,
6. EnableGrouping: true,
7. ViewConfig :{
8. TrackOver: true,
9. StripeRows: false
10. },
11. Store: store,
12. Aggregate :[{
13. Measure: 'amount ',
14. Header: 'sales ',
15. Aggregator: 'sum ',
16. Align: 'right ',
17. Width: 85,
18. Renderer: Ext. util. Format. numberRenderer ('20140901 ')
19. }],
20. Caption: 'sales report ',
21. LeftAxis :[{
22. Width: 80,
23. DataIndex: 'salesperson ',
24. Header: 'sales Person'
25. }],
26. TopAxis :[{
27. DataIndex: 'Year ',
28. Header: 'Year ',
29. Direction: 'asc'
30. }]
31. });

In the future, because mzw.tgrid is a commercial product, it will continuously improve and have new plug-ins and functions. If you need some special implementations, contact us at any time.

To learn more