Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pivot Grid Demo

Lee Boonstra
February 11, 2016

Pivot Grid Demo

Ext JS - premium tier - pivot grid demo

Lee Boonstra

February 11, 2016
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

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