Pivot Grid Demo

Ext JS - premium tier - pivot grid demo

Transcript

1. Pivot Grid
2. Pivot Grid? • Famous feature in Excel. • Tabulate & summarize data in your spreadsheet.
3. A pivot grid in Sencha… • Multi dimensional grid • For data Analytics, a data summarization tool
4. Pivot Grid • Pivot Grids package – A Power UI component • Ext JS 5 & Ext JS 6 classic • Ships with locales • Power UI components are part of premium tiers. • Roadmap: More power UI components!
5. Some things aren’t visible in a normal grid… • What is John Doe's total order amount? • What are the total order amounts by country? • How did sales people perform in a specific year?
6. Pivot Grid – Axes & Aggregator Left Axis Top Axis Aggregator
7. Axes Configurations
8. Aggregator Configurations Examples: •  Sum •  Average •  Min •  Max •  Count •  Own?
9. Various configurations •  Filter •  Configurator •  Drill down •  Stateful
10. How to setup? •  Download the packages from the support portal •  Copy the packages into “packages” folder •  Require the packages in “app.json” •  http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.pivot.Grid •  http://docs.sencha.com/extjs/6.0/components/pivot_grid.html •  http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/ #pivot-grids
11. Exporter plugin • Export Pivot Grid & Classic grid data to Excel • Exports as XML • Example: http://ladysign-apps.com/senchaplaces/
12. Exporter plugin plugins: [ { ptype: 'gridexporter', pluginId: 'exporter' }], https://github.com/savelee/senchaplaces/blob/master/ app/view/grid/Excel.js
13. Exporter plugin plugins: [ { ptype: 'gridexporter', pluginId: 'exporter' }], https://github.com/savelee/senchaplaces/blob/master/ app/view/grid/Excel.js
14. Resources h"p://video.sencha.com/watch/bqWyUpT1YRGsPlTKMKLq-g