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
750
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
210
Introduction to ExtReact, ExtAngular and ExtWebComponents
olgapetrova
0
62
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
62
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
530
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
90
Other Decks in Programming
See All in Programming
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
970
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
260
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
110
我々のデザインシステムは Chakra v3 にアップデートします
shunya078
2
170
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
140
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.9k
cmp.Or に感動した
otakakot
3
260
Tauriでネイティブアプリを作りたい
tsucchinoko
0
380
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.1k
Missing parts when designing and implementing Android UI
ericksli
0
220
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
180
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing for humans not robots
tammielis
250
25k
Agile that works and the tools we love
rasmusluckow
327
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Automating Front-end Workflow
addyosmani
1366
200k
Embracing the Ebb and Flow
colly
84
4.5k
Why Our Code Smells
bkeepers
PRO
334
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
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