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 and App Templates
Search
Lee Boonstra
June 03, 2015
Technology
1
350
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
200
Implementing a custom AI voice Assistant by streaming WebRTC to Dialogflow & Cloud Speech
savelee
3
2k
ML & Chatbots workshop
savelee
1
160
Bring your chatbots to production
savelee
0
80
Improve your customer care by building an AI platform with the use of Google Cloud
savelee
0
280
How to build & measure natural conversations for the Google Assistant
savelee
0
120
Contact Center AI
savelee
3
230
Digital Wednesday
savelee
2
110
The future of customer care
savelee
3
150
Other Decks in Technology
See All in Technology
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
Azure AI ことはじめ
tsubakimoto_s
0
130
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
GitHub's CSS Performance
jonrohan
1026
450k
Agile that works and the tools we love
rasmusluckow
325
20k
Code Reviewing Like a Champion
maltzj
517
39k
Six Lessons from altMBA
skipperchong
24
3.2k
What the flash - Photography Introduction
edds
65
11k
The Mythical Team-Month
searls
217
43k
A better future with KSS
kneath
231
17k
Ruby is Unlike a Banana
tanoku
96
10k
Documentation Writing (for coders)
carmenintech
63
4.2k
Teambox: Starting and Learning
jrom
130
8.6k
A designer walks into a library…
pauljervisheath
201
24k
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