ExtJs 5 – The new Flavour

The ExtJS 5 edition is released. There are a lot of new features which developers may be interested in.

One of the most interesting being, the version is compatible with both desktop and mobile devices. The Sencha touch is now combined with the normal build to give developers a single, seamless platform to work on. This will infact in future reduce the development and maintenance efforts.

Below is the link to official ExtJS 5 Sencha docs: http://docs.sencha.com/extjs/5.0/apidocs/

Now lets have a look into the backward compatibility and upgrade requirements:

 

  1. Compatibility layer: Enabling the compability layer will convert the errors to console messages which we can debug in dev mode and change accordingly.

var Ext = Ext || {};

Ext.manifest = { // the same content as “app.json”

compatibility: {

ext: ‘4.2’

}

}

  1. Browser Support:

    No more support for IE 6 and IE7

    Supported browsers: IE 8+, Firefox, Chrome, Opera, Safari 6+.

    Currently not supported for phone browsers (as per ExtJS 5 official doc).

     

  2. Grid:

    In extJS5 each row is new TABLE. Buffered rendering is by default on now, if required has to be manually switched off.

    GRID filters is now a plugin instead of a configuration. So the code has to be updated accordingly for upgrade.

    The filters needs to be defined at column level also.

  3. Data:

    The store, if empty would return {} (an empty object) previously. Now it will return undefined.

Properties removed:
belongsTo,
hasMany,
associations,
persistenceProperty,
validations

  1. Buffered config in Store is now changed:

    store: {

    type: ‘buffered’, // was “buffered: true”,

    }

  2. Tree Store:

    Root is now a config System property & getRoot, setRoot has been added instead of getRootNode, setRootNode.

  3. Methods changed:

    getAttributeNS – deprecated. use getAttribute instead

    isDisplayed – deprecated. use isStyle(‘display’, ‘none’) instead.

    getStyleSize – deprecated. intended for internal framework use, but unused by the framework

    getComputedWidth – deprecated. use getWidth instead.

    getComputedHeight – deprecated. use getHeight instead.

    setLeftTop – deprecated. use setLocalXY instead

    setBounds – deprecated. use setBox instead

    isBorderBox – deprecated. since IE6/7 are no longer supported, all browsers use border-box model

    relayEvent – removed. Because Ext.Element now derives from Ext.mixin.Observable, this method conflicted with a private relayEvent method in Observable. If relayEvent functionality is needed, use the Observable relayEvents() method.

    isTransparent – deprecated

    getHTML – deprecated. use getHtml instead

    replaceWith – deprecated. use replace() instead.

    setRegion – Removed. Use setBox() instead.

     setRegionWeight- Removed. Use setWeight  instead.

  1. For ID validation please use the below regex in future:

    validIdRe: /^[a-z_][a-z0-9\-_]*$/i

Performance:

 

Now lets look at some performance snapshots:

Ext JS 5.0.0.736

1
2
// Memory footprint
console.memory.usedJSHeapSize    // 27600000

Ext JS 4.2.2

1
2
// Memory footprint
console.memory.usedJSHeapSize    // 13400000

 

Grid Performance
Ext JS 5.0.0.736

1
2

 

 

3

// Initial render time
console.timeEnd(‘render’) // 620ms

 

// Checking total number of DOM elements

Ext.select(‘*’).getCount()       // 18101

Ext JS 4.2.2

1
2

 

3

// Initial render time
console.timeEnd(‘render’) // 650ms

 

// Checking total number of DOM elements

Ext.select(‘*’).getCount()       // 14113

 

Update Performance:

Extjs 4.2.2 – with 200 dom updates on click of a button

Time: 126 seconds

Extjs -5 – with 200 dom updates on click of a button

Time: 13 seconds

Though buffered rendering will solve this problem as only the visible rows will be rendered.

More details will be added later.

 

Ref: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.View

Ref: http://docs.sencha.com/extjs/5.0/whats_new/5.0/extjs_upgrade_guide.html

Ref: http://www.bryntum.com/blog/a-first-look-at-ext-js-5/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s