Ext js 6
-
Upload
manav-gupta -
Category
Technology
-
view
313 -
download
0
Transcript of Ext js 6
![Page 1: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/1.jpg)
1
ExtJs 6 Unified way
![Page 2: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/2.jpg)
• ExtJs 1.1 - April 2007
• ExtJs 2.0 - December 2007
• ExtJs 3.0 - July 2009
• ExtJs 4.0 - April 2011
• ExtJs 5.0 - June 2014
• ExtJs 6.0 - July 2015
ExtJs versions
28 December 2015 2
ExtJs 6 Triton theme
![Page 3: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/3.jpg)
ExtJs 6 features…
28 December 2015 3
• MVVM: Model-View-ViewModel
• Routing
• Responsive
• Data Package Improvements
• Breadcrumb Bars Ext.toolbar.Breadcrumb
• Dashboards Ext.dashboard.Dashboard
• Layout improvements
• Component improvements
• Accessibility
• Screen reader support
• Keyboard navigation (Ext.FocusManager)
![Page 4: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/4.jpg)
MVVM
28 December 2015 4
MVC
MVVM
![Page 5: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/5.jpg)
http://www.example.com/apps/users#user/1234
Ext.define('MyApp.view.main.MainController', {
extend : 'Ext.app.ViewController',
routes : {
'user/:id' : {
action : 'onUser',
conditions : {
':id' : '([0-9]+)'
}
}
},
onUsers : function() {
//...
}
});
Routing: Deep linking
28 December 2015 5
this.redirectTo('user/1234', true);
Other sub features
•Default Token
•Hashes with Parameters
•Hash Parameter Formatting
•Route Handling
•Handling Unmatched Routes
•Using Multiple Routes in a Single Hash
![Page 6: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/6.jpg)
Responsive Configs
28 December 2015 6
Ext.create({
xtype: 'viewport',
layout: 'border',
items: [{
title: 'Tools',
region: 'north',
plugins: 'responsive',
responsiveConfig: {
tall: {
region: 'north'
},
wide: {
region: 'west'
}
}
}, {
title: 'Center',
region: 'center'
}]
});
![Page 7: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/7.jpg)
• Simplified Annotation (reference)
• Many to Many Associations (manyToMany)
• Chained Stores
• Heterogeneous Stores
• Custom Field Types
Ext.define('App.fields.Email', { extend: 'Ext.data.field.String', // inherit converters
alias: 'data.field.email', // now usable as a Field type
validators: 'email' }); Ext.define('App.model.User', { extend: 'Ext.data.Model', fields: [{ name: 'emailAddress', type: 'email' }] });
Data Package Improvements
28 December 2015 7
![Page 8: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/8.jpg)
Breadcrumb Bar
28 December 2015 8
![Page 9: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/9.jpg)
Tables & Grids
28 December 2015 9
• New selection model
• Column locking
![Page 10: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/10.jpg)
• 1990-2000
• First web browser called www
• Read only web
• Millions of pages ≈ ¼ billion sites
• static websites & shopping carts
Web 1.0
28 December 2015 10
![Page 11: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/11.jpg)
• 2000-2010
• War of web browsers
• Read & write web (People’s web)
• Billions of pages & media data
• Blogs, Wikipedia & so on
Web 2.0
28 December 2015 11
![Page 12: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/12.jpg)
• 2010-2020
• Era of creating linked data & intelligent web
• Read, write & execute web
• Trillions of pages & media content
• Semantic web. Application talk to applications
Web 3.0
28 December 2015 12
![Page 13: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/13.jpg)
Web 4.0
28 December 2015 13
• 2010 - 2030
• War of mobile web browsers
• Mobile/Omnipresent web
• Real life events generating data
• Devices talking to devices
• Era of WiFi
• Web OS
• Intelligent personal agents
![Page 14: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/14.jpg)
28 December 2015 14
www.evolutionoftheweb.com
![Page 15: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/15.jpg)
• Merging ExtJs & Sencha Touch
• Enhanced event system
• Touch enabled Sencha charts
• Fashion
• Promises Support
• Pivot Grid
• Exporter Plugin
• Microloader
• Browser Support
• Font Packages
…more features
28 December 2015 15
![Page 16: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/16.jpg)
Unified way
28 December 2015 16
![Page 17: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/17.jpg)
ExtJs 6 architecture
28 December 2015 17
![Page 18: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/18.jpg)
• Sencha’s compiler for building themes based on *.scss
• Implemented in Javascript
• Run within the browser
• Support for tooling
• app watch
• Live Updates (update scss in browser without re-building)
Fashion
28 December 2015 18
![Page 19: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/19.jpg)
Modern Toolkit Desktop
o IE11+
o Firefox and Firefox ESR (Latest 2 Versions)
o Chrome (Latest 2 Versions)
o Safari 7+
Mobile
o IE11+
o Safari 7+
o Android 4.0+ Chrome
o Android 4.4+ Native
Classic Toolkit Desktop
o IE8+ (Strict DOCTYPE)
o Firefox and Firefox ESR (Latest 2 Versions)
o Chrome (Latest 2 Versions)
o Safari 7+
o Opera (Latest 2 Versions)
Tablet
o Safari 7+ (iPad)
o Android 4.0+ Chrome
o Android 4.4+ Native
o Windows 8 Touch Screen - IE10+
Browser Support
28 December 2015 19
![Page 20: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/20.jpg)
–Workspaces
–Packages
–Ruby
–Fashion
–Microloader
–Native packaging
Sencha Cmd 6
28 December 2015 20
![Page 21: Ext js 6](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f04f0e1a28abb2328b4631/html5/thumbnails/21.jpg)
21
Q&A Thank you for switching of the monitors/lights before leaving office