Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sandeep Adwankar: Sencha Power UI : Pivot Grid ...
Search
Lee Boonstra
June 03, 2015
Technology
1
360
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
Share
More Decks by Lee Boonstra
See All by Lee Boonstra
AI Workshop
savelee
0
7
Contact Center AI
savelee
0
220
Implementing a custom AI voice Assistant by streaming WebRTC to Dialogflow & Cloud Speech
savelee
3
2.3k
ML & Chatbots workshop
savelee
1
180
Bring your chatbots to production
savelee
0
98
Improve your customer care by building an AI platform with the use of Google Cloud
savelee
0
340
How to build & measure natural conversations for the Google Assistant
savelee
0
140
Contact Center AI
savelee
3
270
Digital Wednesday
savelee
2
130
Other Decks in Technology
See All in Technology
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
君も受託系GISエンジニアにならないか
sudataka
2
370
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
A better future with KSS
kneath
238
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
BBQ
matthewcrist
86
9.5k
Gamification - CAS2011
davidbonilla
80
5.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How GitHub (no longer) Works
holman
313
140k
Unsuck your backbone
ammeep
669
57k
Transcript
Sandeep Adwankar
[email protected]
Sencha Inc. ©2015 Sencha Power UI :
Pivot Grid and App Templates
Software — approaching a zero-day event! Delivery time Zero-day 2-4
months 12-18 months Forrester: Michael Facemire at Senchacon 2015
Dev Team Productivity Get Started Faster More Time to Code
TIME PRODUCTIVITY
Power UI – Pivot Grid Sencha Inc. ©2015
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
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?
Summarized Data Using Pivot Grid
Pivot Grid – Axes & Aggregator Left Axis Top Axis
Aggregator
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)
Matrix Configurations
Axes Configurations
Aggregator Configurations
Aggregation Methods • Sum • Average • Min • Max • Count • groupSumPercentage • groupCountPercentage • Variance
• VarianceP • stdDev • stdDevP Or write your own custom aggregator function.
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
Pivot Grid Configurator • Drag-and-drop interface for end users to
perform analytics • Snaps to existing data stores • Excel Export
Demo
Power UI – App Templates Sencha Inc. ©2015
None
None
None
None
Prepackaged themes Take Aways Makeover needed Beyond kitchensink
Bootstrap v/s Sencha
Flat Font icons Web fonts Responsive* New Theme Properties Imageless
Design First
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
None
None
None
None
None
Demo
Theme Hierarchy Base Neutral Neptune Neptune Touch Triton Crisp Crisp
Touch Aria Classic Grey
Lighter Standard Resolution Change Colors Font Icons Advantages
Responsiveness Via Layouts
1 2 3 4
1 2 3 4
VBox Anchor 50% 50%
VBox Anchor with Display Block 100%
responsiveConfig : { 'width
< 1000' : { width: 0, visible: false }, 'width >= 1000 && width < 1600’: { width: 230, visible: true }, 'width >= 1600’: { width:300, visible: true } } Responsive Config Code
Q & A