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.

1. 1
ExtJs 6
Unified way

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