Ext JS 4.1 - Layout and Rendering Performance

[edspencer]

Originally a beta of 4.1 was said to be expected in september. Is this still realistic? We are in the process of porting our application to ExtJS 4.x and have so far had big problems with grids in 4.0.x (including 4.0.6) and since reading this thread I am sure 4.1 will fix many problems we encountered. So we are eager to try out 4.1 and don't want to implement grid workarounds/fixes based on 4.0.x since 4.1 is around the corner.
So any ETA on 4.1?

It's likely to push into early October now. Layouts are a tricky thing and we want to get them right before sending anything out. There is a private alpha list for preliminary builds - if you want access to it just drop me an email ([email protected])

[bee]

Hi Ed,

Is that early alpha version given to some specific members ? I am even interested to go for 4.1a coz I faced many problem while migrating from ext3.x to ext4.0.2a. I used many overrides. I want to see ext4.1 if in case I can get. please let me know .

[mmullany]

We'll have a full blog update on the 4.1 release this week.

[mrfr0g]

Looking forward to the blog posting

[bee]

Thx. Looking forward

[Rob Hogan]

http://www.sencha.com/blog/ext-js-4-1-update/

Releasing 4.0.7 to General Community
We’re disappointed about not being able to bring you 4.1 in the time frame we promised. As a result, we will be making our 4.0.7 release – normally only available to commercial support subscribers – available to the entire community in the next week. 4.0.7 contains almost two hundred bug releases subsequent to 4.0.2a, and we want you to have them on an accelerated time-table.

After the disappointing news that 4.1 is another month away, I for one am very happy to hear this. Looking forward to it.

[edspencer]

http://www.sencha.com/blog/ext-js-4-1-update/

After the disappointing news that 4.1 is another month away, I for one am very happy to hear this. Looking forward to it.

Me too, 4.0.7 is a lot better than 4.0.2a. I think 4.1.0 will make you pretty happy too though, we just want to get it right before we send it out

[hschaefer123]

Hallo Ed,
currently i found the time to start migrating parts of my ext js based portal framework to Ext 4.

Beside the common problems of migration (many thankx to compat layer), the main reasons not to
switch right know are:

1) I need more time to migrate 3rd Party ux that does not support 4.x right now
I hope, Sencha will not start completely redesign the API with each new release.
I like the new constructs like mixins, but the total costs for migration does not reflect the business benefit. Please pay attention on downward compatibilty for further development

2) Starting with 4.0.6 and Bugs
A lot of the needed functionality is buggy right know.
Some of the bugs has been addressed before (ex. Tabs with 16x16 icons does not render correctly) and other bugs has been reported by me. I also reported bugs with 4.0 but knowbody pay attention on this!?! They even did not get a state insided forum.

I found out a lot of issues/open questions using the compat layer and inspecting the 4.x source.
For example does the locale/de.js files prototype things on root level that have been moved to a special listConfig object and the compat layer is throwing compat issues for the framework itself!?!

3) Magic Refs and performance
The main entry of accessing child components in former devs has been the REF property (also pointed out by your Sencha Designer Tutorials) as the prefered way of accessing sub components.
Right know i have to declare pointers onInit like
me.Comp1 = me.down(#itemId)
me.Comp2 = me.down(#itemId2)

i did not investigate time to find out the performance diffs between down, up, query and child,
but lot of event handlers find used component on each event!
Is this feature really performant and should used this way, if thousands of queries to find components (maybe via complex selectors) are fired very often.

Why not to bring back REF property (only on root level of components, not "../") that automatically creates a object reference onInit to quick access such components? This would be an easy way of optimizing overall performance.

4) Scrolling
The main painpoint is the umcomfortable behavior of scrolling inside Grids. It does not feel native and in complex szenarios there is a delay between dragging scroller and reaction of the grid.
If i understood right, this topic is addressed for 4.1 called native scrolling.

5) General Performance
I mainly migrated and tested under current Firefox and Chrome but also on this modern browsers the overall performance is always slower than 3.x (especially feeled performance for scrolling).
Opening simple Windows that use Templates feels also delayed (time from action click till rendering).
It feels, that there is always a delay of xxx ms.

6) User Experience for Desktop and Mobile
Some weeks ago, i played around with Sencha Touch.
I like the way of native user experience without the need of app store.
With touch i can easily add mobile support to my portal framework.
Right know, the main pain points are the different libs, but with Touch, it will get closer to Ext 4.

What i really need will is a global Ext JS Namespace so i can use Ext JS 4 and Touch Hand-in-Hand.
For example Touch 1.0 does not had a TaskManager, so i added the EXT JS Taskmanager to my touch project. Why not to use the business logic and store globally for js and touch and only have views and controllers device specific? Right know i have to use such things redundant (especially touch 1 does not support the new classloader/ extend methods). Are there any plans to define a global Sencha component namespace? A lot of component are in common and all other components are desktop or mobile specific.

Resumee:
I like the overwholed architecture (esp. mixins) and also the new theming possibilities, but not on the cost of performance that leads to a bad user experience (especially if the users know the same 3.x app).

Currently i hope, lot's of this pain points will be addressed in 4.1 and the support for Ext 3 will remain till we are able to migrate and use Ext 4 for productive projects on the same quality standard of Ext 3.

With 4.1 and the new announced performance messurement tools i will bring my portal framework online for further investigations.

It would be nice to get a comment on this.

Cheers Holger

[sjmittal]

It seems when we render lot of controls, layouts get compromised.

Like I am rendering around 400 controls in a two column layout inside a viewport. Each column is of .5 width. I should never get a horizontal scroll.

I am pasting the code here, which works fine on ExtJs 4.0 but on 4.1 preview release you will notice a horizontal scroll. It happens on both IE8 and FF3.x

To test this example, you can simply create any html file and refer to this js. Make sure you are pointing to correct bootstrap.js

Ext.require([
    'Ext.*'
]);

Ext.onReady(function(){

   Ext.tip.QuickTipManager.init();
    var items1 = [];
    var items2 = [];

        // The data for all states
    var states = [
        {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
        {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"}
    ];

        // simple array store
     // Define the model for a State
    Ext.define('State', {
        extend: 'Ext.data.Model',
        fields: [
            {type: 'string', name: 'abbr'},
            {type: 'string', name: 'name'},
            {type: 'string', name: 'slogan'}
        ]
    });

for(var i = 0; i < 100; i++) {


    // The data store holding the states; shared by each of the ComboBox examples below
    var store = Ext.create('Ext.data.Store', {
        model: 'State',
        data: states
    });

    items1.push({
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first'
                });
    items1.push({
                    xtype:'combo',
                    fieldLabel: 'State',
                    hiddenName: 'state',
                    store: store,
                    displayField:'state',
                    valueField: 'abbr',
                    typeAhead: true,
                    mode: 'local',
                    forceSelection: true,
                    triggerAction: 'all',
                    value: 'OK',
                    selectOnFocus:true
                });

    items2.push({
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'abaf'
                });
    items2.push({
                    xtype:'datefield',
                    fieldLabel: 'Date',
                    name: 'date',
                    value: '10/14/2001'
                });
    }
    
    var viewport = Ext.create('Ext.Viewport', {
        layout: 'border',
        items: [
        Ext.create('Ext.Panel', {
            region: 'center', 
            autoScroll: true,
            layout: 'anchor',
            items: Ext.create('Ext.form.Panel', {
                frame:true,
                title: 'Multi Column, Nested Layouts and Anchoring',
                bodyStyle:'padding:5px 5px 0',
                items: [{
                    xtype: 'container',
                    layout:'column',
                    items:[{
                        columnWidth: 0.5,
                            xtype: 'container',
                        layout: 'anchor',
                        defaults: {
                            value: '',
                            anchor: '100%'
                        },
                        items: items1
                    },{
                        columnWidth: 0.5,
                            xtype: 'container',
                        layout: 'anchor',
                        defaults: {
                            value: '',
                            anchor: '100%'
                        },
                        items: items2
                    }]
                }]
            })
        })]
    });
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Dynamic Forms built with JavaScript</title>

    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="<path to resources/css/ext-all.css>" />
    <script type="text/javascript" src="<path to bootstrap.js>"></script>

    <script type="text/javascript" src="<path to the above js>"></script>
</head>
<body>
</body>
</html>

Perhaps changing in logic is causing this because in old flow at times there used to be two pass to render all the items. Correctness of the layouts need to be looked into.

Otherwise as claimed I am seeing 3x improvement in the performance.

Thanks
Sachin

[michall]

Some new info on blog http://www.sencha.com/blog/whats-new-in-ext-js-4-1