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
730
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
200
Introduction to ExtReact, ExtAngular and ExtWebComponents
olgapetrova
0
62
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
59
How to Re-Architect a JavaScript Class System
olgapetrova
0
110
Web Push Notifications
olgapetrova
1
280
How to add D3.js visualization to your Ext JS application
olgapetrova
1
510
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
86
Other Decks in Programming
See All in Programming
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
730
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
270
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
650
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
350
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
410
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Raft: Consensus for Rubyists
vanstee
135
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
The Language of Interfaces
destraynor
153
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
Typedesign – Prime Four
hannesfritz
39
2.3k
KATA
mclloyd
27
13k
Producing Creativity
orderedlist
PRO
340
39k
Done Done
chrislema
180
16k
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