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
370
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
67
Contact Center AI
savelee
0
250
Implementing a custom AI voice Assistant by streaming WebRTC to Dialogflow & Cloud Speech
savelee
3
2.4k
ML & Chatbots workshop
savelee
1
210
Bring your chatbots to production
savelee
0
120
Improve your customer care by building an AI platform with the use of Google Cloud
savelee
0
410
How to build & measure natural conversations for the Google Assistant
savelee
0
150
Contact Center AI
savelee
3
290
Digital Wednesday
savelee
2
160
Other Decks in Technology
See All in Technology
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.7k
Language Update: Java
skrb
2
290
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
190
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
180
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
240
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
KotlinConf 2025_イベントレポート
sony
1
130
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
140
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
220
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
480
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Facilitating Awesome Meetings
lara
55
6.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
4 Signs Your Business is Dying
shpigford
184
22k
GitHub's CSS Performance
jonrohan
1032
460k
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