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
790
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
580
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
96
Other Decks in Programming
See All in Programming
楽して成果を出すためのセルフリソース管理
clipnote
0
180
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
410
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
490
Deep Dive into Kotlin Flow
jmatsu
1
360
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
140
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Automating Front-end Workflow
addyosmani
1370
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
BBQ
matthewcrist
89
9.8k
Unsuck your backbone
ammeep
671
58k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Ace a Technical Interview
jacobian
279
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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