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
ExtJS 6: one framework for all devices
Search
Olga
July 14, 2015
Programming
1
780
ExtJS 6: one framework for all devices
MunichJS talk about new features of ExtJS 6
Olga
July 14, 2015
Tweet
Share
More Decks by Olga
See All by Olga
Visual Feature Engineering for Machine Learning with React
olgapetrova
0
240
Introduction to ExtReact, ExtAngular and ExtWebComponents
olgapetrova
0
68
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
69
How to Re-Architect a JavaScript Class System
olgapetrova
0
120
Web Push Notifications
olgapetrova
1
290
How to add D3.js visualization to your Ext JS application
olgapetrova
1
570
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
94
Other Decks in Programming
See All in Programming
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
590
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
590
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
870
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
390
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Statistics for Hackers
jakevdp
799
220k
Bash Introduction
62gerente
614
210k
What's in a price? How to price your products and services
michaelherold
246
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Six Lessons from altMBA
skipperchong
28
3.9k
Code Reviewing Like a Champion
maltzj
524
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Transcript
ExtJS 6: one JS framework for all devices Olga Petrova
History 2007 first release 2008 commercial license 2010 framework for
mobile app 2015 ExtJS 6.0
⎯ UI components ⎯ MVC and MVVM ⎯ Data binding
⎯ Theming ⎯ Build tool — Sencha Cmd Why people love ExtJS
ExtJS 6 ExtJS 5 + Sencha Touch 2 = ExtJS
6
New features ⎯ Universal applications ⎯ Classic and Modern Views
⎯ Share core code ⎯ 3D charts
Universal app targets ⎯ All devices ⎯ All operating systems
⎯ All browsers ⎯ All screen sizes Single URL
MunichJS app Meetups Talks Popularity
Folder structure View-specific code Global code
Classic view Main tabs Meetup list Agenda Ext.tab.Panel Ext.grid.Panel Ext.view.View
Modern view Meetup list Main tabs Agenda Main tabs Ext.grid.Grid
Ext.tab.Panel Ext.navigation.View Ext.tab.Panel
Ext.define('MunichJS.view.main.MeetupList', {! extend: 'Ext.grid.Panel',! ! xtype: 'meetuplist’,! ! title: 'Meetups’,!
! columns: [! { text: 'Date', dataIndex: 'date' },! { text: 'Company', dataIndex: 'company', flex: 1 },! { text: 'Place', dataIndex: 'place', flex: 1 }! ],! store: {! type: 'Meetup'! }! });! /classic/view/ MeetupList.js
/classic/view/ Main.js Ext.define('MunichJS.view.main.Main', {! extend: 'Ext.tab.Panel',! xtype: 'app-main',! requires: [!
'MunichJS.view.main.MeetupList’,! …! ],! ! items: [{! xtype: 'meetuplist'! }],! …! });!
Code-organization MVC MVVM
/app/model/ Meetup.js Ext.define('MunichJS.model.Meetup', {! extend: 'MunichJS.model.Base',! ! fields: [! 'date',!
'sponsors',! 'company',! 'place',! 'going’! ]! });!
/app/model/ Talk.js Ext.define('MunichJS.model.Talk', {! extend: 'MunichJS.model.Base'! });!
Model relations Ext.define('MunichJS.model.Meetup', {! extend: 'MunichJS.model.Base',! requires: ['MunichJS.model.Talk'],! ! fields:
[! 'date',! 'sponsors',! 'company',! 'place',! 'going',! 'comments'! ],! hasMany: 'Talk'! });! ! //meetup.talks()!
/app/store/ Meetup.js Ext.define('MunichJS.store.Meetup', {! extend: 'Ext.data.Store',! storeId: 'meetup’,! alias: 'store.meetup’,!
! model: 'MunichJS.model.Meetup',! ! proxy: {! type: 'ajax',! url: 'app/data/meetup.json',! reader: {! type: 'json',! rootProperty: 'meetup'! }! }! });!
Code-organization MVC MVVM
/app/controller/ Main.js Ext.define('MunichJS.controller.Main', {! extend: 'Ext.app.Controller’,! ! views: [ 'main.Main’
],! ! init: function() {! this.control({! 'meetuplist' : {! activate: this.loadMeetups,! render: this.loadMeetups! }! });! },! loadMeetups: function (grid) {! grid.getStore().load();! }! });!
Code-organization MVC MVVM
/app/view/ MeetupModel.js Ext.define('MunichJS.view.main.MeetupModel', {! extend: 'Ext.app.ViewModel’,! alias: 'viewmodel.meetup',! ! data:
{! meetup: null! },! ! stores: {! talks: {}! }! });!
/classic/view/ Agenda.js Ext.define('MunichJS.view.main.Agenda', {! extend: 'Ext.panel.Panel',! xtype: 'agenda',! requires: [!
'MunichJS.view.main.MeetupModel'! ],! viewModel: 'meetup',! ! bind: {! title: 'Agenda for {meetup.date}'! },! reference: 'agenda',! ! items: [{! xtype: 'dataview',! bind: {! store: '{talks}'! },! …! }]! });!
MVC + VM
⎯ Controller is always alive, ⎯ ViewController is created ⎯
and destroyed with his View ⎯ Controller can control anything, ⎯ ViewController controls ⎯ only his View Controller vs ViewController
/classic/view/ MainController.js Ext.define('MunichJS.view.main.MainController', {! extend: 'Ext.app.ViewController',! alias: 'controller.main',! ! control:
{! 'meetuplist': {! select: 'onMeetupSelect'! }! },! ! onMeetupSelect: function(sender, meetup) {! var talksStore = meetup.talks(),! agenda = this.lookupReference('agenda');! ! agenda.getViewModel().set('meetup', meetup);! agenda.getViewModel().set('talks', talksStore);! }! });!
/app/view/ Chart.js Ext.define('MunichJS.view.main.Chart', {! extend: 'Ext.chart.CartesianChart',! xtype: 'meetupchart’,! store:
{! type: 'meetup',! autoLoad: true! },! engine: 'Ext.draw.engine.Canvas',! axes: [{! type: 'numeric3d',! position: 'left',! fields: ['going']! }, {! type: 'category3d',! position: 'bottom',! fields: ['date']! }],! series: {! xField: 'date',! yField: 'going',! type: 'bar3d'! }! });!
⎯ Build profiles ⎯ Application profiles ⎯ Platform configs ⎯
Responsive configs Switching views
⎯ Build profiles ⎯ Application profiles ⎯ Platform configs ⎯
Responsive configs Switching views
/ app.json "builds": {! "classic": {! "toolkit": "classic",! "theme": "theme-triton",!
"requires": [! "charts"! ]! },! ! "modern": {! "toolkit": "modern",! "theme": "theme-neptune",! "requires": [! "charts"! ]! }! },!
/ index.html Ext.beforeLoad = function (tags) {! Ext.manifest = tags.desktop
?! 'classic' : 'modern’; ! };!
⎯ Build profiles ⎯ Application profiles ⎯ Platform configs ⎯
Responsive configs Switching views
/app/ Application.js Ext.define('App.Application', {! extend: 'Ext.app.Application',! ! profiles: [! 'Desktop',!
'Mobile'! ]! });!
/profile/ Desktop.js Ext.define('App.profile.Desktop', {! extend: 'Ext.app.Profile',! ! mainView: 'App.view.desktop.Main',! !
isActive: function () {! return Ext.os.is.Desktop;! },! ! …! });!
⎯ Build profiles ⎯ Application profiles ⎯ Platform configs ⎯
Responsive configs Switching views
Platform configs Ext.define('MunichJS.view.main.Main', {! extend: 'Ext.tab.Panel',! xtype: 'app-main’,! ! header:
{! title: {! platformConfig: {! desktop: {! text: 'MunichJS Application'! },! '!desktop': {! text: 'MunichJS App'! }! }! }! },! ! …! });!
⎯ Build profiles ⎯ Application profiles ⎯ Platform configs ⎯
Responsive configs Switching views
Responsive config Ext.define('MunichJS.view.main.Main', {! extend: 'Ext.tab.Panel',! xtype: 'app-main',! ! …!
responsiveConfig: {! tall: {! headerPosition: 'top'! },! wide: {! headerPosition: 'left'! }! },! …! });!
⎯ Build profiles ⎯ Application profiles ⎯ Platform configs ⎯
Responsive configs Switching views
⎯ Loading time ⎯ Performance ⎯ Not completely bug-free Disadvantages
Thank you! Icons: Sergey Furtaev furtaev.ru