1

ExtJs 6 Unified way

• 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

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)

MVVM

28 December 2015 4

MVC

MVVM

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

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'

}]

});

• 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

Breadcrumb Bar

28 December 2015 8

Tables & Grids

28 December 2015 9

• New selection model

• Column locking

• 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

• 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

• 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

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

28 December 2015 14

www.evolutionoftheweb.com

• 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

Unified way

28 December 2015 16

ExtJs 6 architecture

28 December 2015 17

• 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

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

–Workspaces

–Packages

–Ruby

–Fashion

–Microloader

–Native packaging

Sencha Cmd 6

28 December 2015 20

21

Q&A Thank you for switching of the monitors/lights before leaving office