Pivot Grid Demo

Ext JS - premium tier - pivot grid demo

Transcript

1. Pivot Grid
   

   View Slide

2. Pivot Grid?
   • Famous feature in Excel.
   • Tabulate & summarize
   data in your
   spreadsheet.
   

   View Slide

3. A pivot grid in Sencha…
   • Multi dimensional grid
   • For data Analytics, a data summarization tool
   

   View Slide

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!
   

   View Slide

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?
   

   View Slide

6. Pivot Grid – Axes & Aggregator
   Left Axis
   Top Axis
   Aggregator
   

   View Slide

7. Axes Configurations
   

   View Slide

8. Aggregator Configurations
   Examples:
   •  Sum
   •  Average
   •  Min
   •  Max
   •  Count
   •  Own?
   

   View Slide

9. Various configurations
   •  Filter
   •  Configurator
   •  Drill down
   •  Stateful
   

   View Slide

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
    

    View Slide

11. Exporter plugin
    • Export Pivot Grid & Classic grid data to Excel
    • Exports as XML
    • Example:
    http://ladysign-apps.com/senchaplaces/
    

    View Slide

12. Exporter plugin
    plugins: [ {
    ptype: 'gridexporter',
    pluginId: 'exporter'
    }],
    https://github.com/savelee/senchaplaces/blob/master/
    app/view/grid/Excel.js
    

    View Slide

13. Exporter plugin
    plugins: [ {
    ptype: 'gridexporter',
    pluginId: 'exporter'
    }],
    https://github.com/savelee/senchaplaces/blob/master/
    app/view/grid/Excel.js
    

    View Slide

14. Resources
    h"p://video.sencha.com/watch/bqWyUpT1YRGsPlTKMKLq-g
    

    View Slide