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
710
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
170
Introduction to ExtReact, ExtAngular and ExtWebComponents
olgapetrova
0
59
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
51
How to Re-Architect a JavaScript Class System
olgapetrova
0
99
Web Push Notifications
olgapetrova
1
280
How to add D3.js visualization to your Ext JS application
olgapetrova
1
460
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
84
Other Decks in Programming
See All in Programming
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
940
Elm Form Validation
bkuhlmann
0
510
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
120
Semantic search with Django and pgvector
pauloxnet
0
240
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
430
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Java 22 Overview
kishida
1
180
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
GitHub Copilotのススメ
marcy731
1
200
見た目から始める生産性向上
ikumatadokoro
7
820
VS Code をプロダクトにどう取り込むか
onomax
1
360
Featured
See All Featured
RailsConf 2023
tenderlove
4
540
Robots, Beer and Maslow
schacon
PRO
155
7.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
A Modern Web Designer's Workflow
chriscoyier
689
190k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
A better future with KSS
kneath
231
16k
Gamification - CAS2011
davidbonilla
76
4.6k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Side Projects
sachag
451
41k
Building Applications with DynamoDB
mza
88
5.6k
How to name files
jennybc
65
93k
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