VERY SLOW behavior of fields in nested panels (compared to extjs 3)

[tprodigy1]

here is an exemple to show how SLOW can behave extjs 4 (the same type of code is IMMEDIATE in extjs3)

in the code below, I create 4 comboboxes that I put in multiple nested panels (7 levels of nested panels)
complex applications can easily reach this number of nested panels
selecting an element in the first combo, will show / hide the others. this operation can take several seconds even with chrome, it's crazy.

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();

    // Store creation
    Ext.define('State', {
        extend: 'Ext.data.Model',
        fields: [
            {type: 'string', name: 'abbr'},
            {type: 'string', name: 'name'},
            {type: 'string', name: 'slogan'}
        ]
    });

    // 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"},
        {"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
        {"abbr":"AR","name":"Arkansas","slogan":"The Natural State"}];

    var store = Ext.create('Ext.data.Store', {
        model: 'State',
        data: states
    });
    
    // a Combobox
    var simpleCombo2 = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'combo2',
        displayField: 'name',
        width: 320,
        labelWidth: 130,
        store: store,
        queryMode: 'local',
        typeAhead: false,
        forceSelection: true,
        allowBlank : false
    });

    // a Combobox        
    var simpleCombo3 = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'combo3',
        displayField: 'name',
        width: 320,
        labelWidth: 130,
        store: store,
        queryMode: 'local',
        typeAhead: false,
        forceSelection: true,
        allowBlank : false
    });

    // a Combobox            
    var simpleCombo4 = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'combo4',
        displayField: 'name',
        width: 320,
        labelWidth: 130,
        store: store,
        queryMode: 'local',
        typeAhead: false,
        forceSelection: true,
        allowBlank : false
    });
                
    // a Combobox with a listener
    var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'combo1',
        displayField: 'name',
        width: 320,
        labelWidth: 130,
        store: store,
        queryMode: 'local',
        typeAhead: false,
        forceSelection: true,
        allowBlank : false,
        listeners : { select : function()
                               { 
                                 simpleCombo2.setVisible(!simpleCombo2.isVisible());
                                 simpleCombo3.setVisible(!simpleCombo3.isVisible());
                                 simpleCombo4.setVisible(!simpleCombo4.isVisible());
                               }
                    }
    });

    Ext.create ('Ext.panel.Panel',
    {
      title : 'a panel',
      layout      : 'anchor',
      border      : true,
      autoScroll  : false,
      renderTo    : Ext.getBody(),
      items       : [{
                         items       : [
                         {
                           items        : [
                           {
                             items        : [
                             {
                               items        : [
                               {
                                 items        : [
                                 {
                                   items        : [
                                   {
                                     items        : [ simpleCombo,
                                                      simpleCombo2,
                                                      simpleCombo3,
                                                      simpleCombo4]
                                   }]
                                 }]
                               }]
                             }]
                           }]
                         }]
                      }]
            
    });
});

Edit : I confirm this pb is fixed in 4.0.2

[stevil]

I'm sure someone will come along to slap your wrist about the evils of "overnesting", but i get it - sometimes you need to deeply nest to get the extensibility you're after.

Anyway, not my real point. There are a few posts about performance, so I think the issue is getting attention - one member posted profiler timings at various levels of nesting to illustrate the point. I was told last week to expect a 4.01 sometime soon (possibly this week), and another maintenance release later in the month.

keeping my fingers crossed for a fix,

stevil

[tprodigy1]

in my example, for sure it seems "overnested", but extjs is designed like this, and in a real application, if you just setup a form panel, containing a tab panel, in wich you want to put dynamic and custom controls that fit in a column layout and so on ..... I can tell you that you reach these levels
and it is very surprising that extjs3 could handle this well, but extjs4 won't

also, I noticed that in tabPanels switching from a tab to another is also very slow, (while, again, it was immediate in extjs3 as it was just a matter of show/hide a DIV)

to me, this is a blocking issue, I cannot switch to extjs4 until it does at least what extjs3 did

[mstijak]

also, I noticed that in tabPanels switching from a tab to another is also very slow

Same here. Tab switching is really slow. One more problem with tabs is that icons are truncated as buttons are smaller comparing to Ext JS 3.

[Aero]

Hi,

Do we have any confirmation on the "rather slow" performence of some of the components in current version ? Are Sencha working on it ?

I have also a viewport application up for testing with a tabpanel in the center region,which has a accordion as item with formpanels.

Adding a new tab and load this takes 20-30 seconds (IE7),switchning between the tabs also takes 5-10.

Thanks

[tvanzoelen]

validation on change with formfields also causes performance loss. If you have validation on your fields and you load it with data maybe at the moment of a tab change, it fires a doLayout or resize for each field on the formpanel. It was possible to block by validateOnChange = false.

If you look at the first example in this thread you see at every formfield an allowBlanc property set to false. In that case it means if you have four fields doLayout on the parentpanel is called four times. With firebug you even get some blocking script messages.

[rich02818]

This thread has been open for 19 days, contains example code, documents a show stopping type of problem, and has no response at all from Sencha....that is very troubling.

..snip..
Do we have any confirmation on the "rather slow" performence of some of the components in current version ? Are Sencha working on it ?
..snip..

[Mycoding]

I also mention slow work of ExtJS 4.0.
At the moment I don't know use ExtJS 4.0 or not.

And what is bad it is very slow even in Chrome.

I think more about why it is so and come to coclusion.
(I don't know am I right or not.)
MVC technology slows code in 2.5 times.
For that reason MVC is not used in client side.
I was very supprised that ExtJS 4.0 use MVC.

Also I did many works in Raphael. Unfortunately, it is too slow.
At the moment there is not alternativa to actionscript.(((
I wish that broweres increase their perfomance.

So I don't know shoud I use in future ExtJS 4.x or not.
But I was really upset when learn more about ExtJS 4.0.
I waited another...
Two weeks ago I did a decision that in 2 years I will not use ExtJS 4.x.
I will use ExtJS 3.3.1 and 3.3.3.
And I will change my decision only if Sencha increase perfomance or invent something more.
I also think about "Light ExtJS".

In fact ExtJS at the moment is used only for ERP/CRM.
I did not face another progets.
I very want to use ExtJS for alternativa to JQuery in doing sites.
But even if we use JSBuilder(ExtJS 3.x) for generating framework with only Ext.Window we get
about 200~300 kbs.

I know that in ExtJS 4.0 it is possible to use Ext.Loader.
But real working sample I didnot face to.
I usually use all widget of ExtJS on one page.
Grid,charts,trees,panels, windows, forms and so on.

I think that Sencha should think more about devision of points to use ExtJS.
1 - For ERP/CRM at the moment only this is possible
2 - For sites.

If Sencha will do it I am sure ExtJS became very popular and replace JQuery and other frameworks.

[paipai]

Same problem with small code.

I tried to set up my layout: A header, a left panel, a center and right panel.
Left panel is collapsible. That's ok.

But if I add an accordion in the left panel with a little text content, that's finished, even in chrome it is slow to collapse my panel.

I do a search on google the first result:
"Ext JS 4 Preview: Faster, Easier, More Stable | Blog | Sencha"

Same code with ExtJS 3 -> No problem.
What can I do ?

[rich02818]

@paipai since it is a small example, could you post your code to help Sencha in debugging the layout performance problems?

Same problem with small code.

I tried to set up my layout: A header, a left panel, a center and right panel.
Left panel is collapsible. That's ok.

But if I add an accordion in the left panel with a little text content, that's finished, even in chrome it is slow to collapse my panel.

I do a search on google the first result:
"Ext JS 4 Preview: Faster, Easier, More Stable | Blog | Sencha"

Same code with ExtJS 3 -> No problem.
What can I do ?