Ext js 6
0 likes1,186 views
ExtJs 6 includes features such as MVVM, routing, responsive design capabilities, data package improvements, breadcrumb bars, dashboards, layout improvements, accessibility support, and component improvements. It also merges ExtJs and Sencha Touch for a unified development experience across desktop and mobile. Other features include promises support, pivot grids, export plugins, microloading, and expanded browser support. Fashion was introduced, which is a compiler for building themes based on SCSS. Sencha Cmd 6 provides capabilities like workspaces, packages, and native packaging.
![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](https://image.slidesharecdn.com/extjs6-151227210437/85/Ext-js-6-5-320.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'
}]
});](https://image.slidesharecdn.com/extjs6-151227210437/85/Ext-js-6-6-320.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](https://image.slidesharecdn.com/extjs6-151227210437/85/Ext-js-6-7-320.jpg)
Ext js 6
- 2. • 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
- 3. 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)
- 4. MVVM 28 December 2015 4 MVC MVVM
- 5. 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
- 6. 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' }] });
- 7. • 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
- 8. Breadcrumb Bar 28 December 2015 8
- 9. Tables & Grids 28 December 2015 9 • New selection model • Column locking
- 10. • 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
- 11. • 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
- 12. • 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
- 13. 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
- 14. 28 December 2015 14 www.evolutionoftheweb.com
- 15. • 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
- 16. Unified way 28 December 2015 16
- 17. ExtJs 6 architecture 28 December 2015 17
- 18. • 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
- 19. 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
- 20. –Workspaces –Packages –Ruby –Fashion –Microloader –Native packaging Sencha Cmd 6 28 December 2015 20
- 21. 21 Q&A Thank you for switching of the monitors/lights before leaving office