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
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
The future of customer care
savelee
3
160
Other Decks in Technology
See All in Technology
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
130
第27回クラウド女子会 ~re:Invent 振り返りLT会~ 宣言型ポリシー、使ってみたらこうだった!
itkr2305
0
290
あなたはJVMの気持ちを理解できるか?
skrb
5
2k
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
240
パブリッククラウドのプロダクトマネジメントとアーキテクト
tagomoris
4
770
現実的なCompose化戦略 ~既存リスト画面の置き換え~
sansantech
PRO
0
170
Oracle Cloud Infrastructure:2025年1月度サービス・アップデート
oracle4engineer
PRO
0
210
パフォーマンスとコスト改善のために法人データ分析基盤をBigQueryに移行した話
seiya303
1
100
CNAPPから考えるAWSガバナンスの実践と最適化
nrinetcom
PRO
1
330
マルチデータプロダクト開発・運用に耐えるためのデータ組織・アーキテクチャの遷移
mtpooh
0
150
20250129 Findy_テスト高活用化
dshirae
0
230
srekaigi2025-hajimete-ippo-aws
masakichieng
0
240
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Optimizing for Happiness
mojombo
376
70k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
How GitHub (no longer) Works
holman
312
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Producing Creativity
orderedlist
PRO
343
39k
Bash Introduction
62gerente
610
210k
Visualization
eitanlees
146
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Your Own Lightsaber
phodgson
104
6.2k
4 Signs Your Business is Dying
shpigford
182
22k
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