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

Sandeep Adwankar: Sencha Power UI : Pivot Grid and App Templates

Sandeep Adwankar: Sencha Power UI : Pivot Grid and App Templates

Sandeep Adwankar: Sencha Power UI : Pivot Grid and App Templates

Lee Boonstra

June 03, 2015
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. Sandeep Adwankar
    [email protected]
    Sencha Inc. ©2015
    Sencha Power UI : Pivot
    Grid and App Templates

    View Slide

  2. Software — approaching a zero-day event!
    Delivery time
    Zero-day
    2-4
    months
    12-18
    months
    Forrester: Michael Facemire at Senchacon 2015

    View Slide

  3. Dev Team Productivity
    Get Started Faster
    More Time to Code
    TIME
    PRODUCTIVITY

    View Slide

  4. Power UI – Pivot Grid
    Sencha Inc. ©2015

    View Slide

  5. What is a Pivot Grid?
    • A data summarization tool
    • Enables rapid summarization of large sets of data
    • Provides a simple way to perform basic analytics

    View Slide

  6. Classic Ext JS Grid: Sales Data
    • What is John Doe's total
    order amount?
    • What are the total order
    amounts by country?
    • How did salespeople
    perform in a specific year?

    View Slide

  7. Summarized Data Using Pivot Grid

    View Slide

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

    View Slide

  9. Pivot Grid Architecture
    Sencha Pivot Grid Component (Grid panel)
    Abstract Matrix
    Local Matrix
    (all calculations in the browser)
    Remote Matrix
    (all calculations remotely on the server)
    Left Axis Top Axis Results (Aggregation)

    View Slide

  10. Matrix Configurations

    View Slide

  11. Axes Configurations

    View Slide

  12. Aggregator Configurations

    View Slide

  13. Aggregation Methods
    • Sum
    • Average
    • Min
    • Max
    • Count
    • groupSumPercentage
    • groupCountPercentage
    • Variance
    • VarianceP
    • stdDev
    • stdDevP
    Or write your own custom aggregator function.

    View Slide

  14. Out-of-the-box Features
    •  Sorting (case sensitive, using
    sort indexes)
    •  Sub-totals and Grand-totals
    •  Results Filtering (for labels
    and values)
    •  Results Grouping (using
    ranges)
    •  Renderers
    •  DrillDown Plugin
    •  Outline & Compact Layouts

    View Slide

  15. Pivot Grid Configurator
    •  Drag-and-drop interface for
    end users to perform analytics
    •  Snaps to existing data stores
    •  Excel Export

    View Slide

  16. Demo

    View Slide

  17. Power UI – App
    Templates
    Sencha Inc. ©2015

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Prepackaged themes
    Take
    Aways
    Makeover needed
    Beyond kitchensink

    View Slide

  23. Bootstrap v/s Sencha

    View Slide

  24. Flat
    Font icons
    Web fonts
    Responsive*
    New
    Theme
    Properties
    Imageless

    View Slide

  25. Design First

    View Slide

  26. Stencils for Designers
    •  Symbols used within Design
    tools (Illustrator, Omnigraffle,
    etc.) to convey ideas visually
    •  Sencha is bringing framework
    components closer to the
    designers, so they can align
    their designs with the
    capabilities of framework

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. Demo

    View Slide

  33. Theme Hierarchy
    Base
    Neutral
    Neptune
    Neptune Touch Triton Crisp
    Crisp Touch
    Aria
    Classic
    Grey

    View Slide

  34. Lighter
    Standard
    Resolution
    Change Colors
    Font Icons
    Advantages

    View Slide

  35. Responsiveness
    Via Layouts

    View Slide

  36. 1 2
    3 4

    View Slide

  37. 1
    2
    3
    4

    View Slide

  38. VBox
    Anchor
    50% 50%

    View Slide

  39. VBox
    Anchor with
    Display Block
    100%

    View Slide

  40. responsiveConfig  :  {  
               'width  <  1000'  :  {  
       width:  0,  
       visible:  false  
     },  
     'width  >=  1000  &&  width  
    <  1600’:  {  
       width:  230,  
       visible:  true  
     },  
     'width  >=  1600’:  {  
       width:300,  
       visible:  true  
     }  
    }  
    Responsive
    Config
    Code

    View Slide

  41. Q & A

    View Slide