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
51
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
200
Bring your chatbots to production
savelee
0
110
Improve your customer care by building an AI platform with the use of Google Cloud
savelee
0
390
How to build & measure natural conversations for the Google Assistant
savelee
0
150
Contact Center AI
savelee
3
290
Digital Wednesday
savelee
2
150
Other Decks in Technology
See All in Technology
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
190
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
140
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
410
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
3
1.7k
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
3
610
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
600
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
120
TableauLangchainとは何か?
cielo1985
1
140
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Bash Introduction
62gerente
613
210k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Side Projects
sachag
455
42k
Docker and Python
trallard
44
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Designing for Performance
lara
610
69k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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