Threaded View

    You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    17
    Vote Rating
    0
    tprodigy1 is on a distinguished road

      0  

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

    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.

    Code:
    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
    Last edited by tprodigy1; 10 Jun 2011 at 11:11 AM. Reason: tested with 4.0.2

Similar Threads

  1. Tabbing behavior in screen with Form Fields and Tree Panels
    By Scott Murawski in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 24 Jun 2010, 12:28 PM
  2. Initial rendering still slow compared to 2.3.0
    By meroy in forum Community Discussion
    Replies: 7
    Last Post: 15 Feb 2010, 10:34 AM
  3. Slow FormPanel rendering in 3.0 (compared to 2.3)
    By vot in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 23 Jul 2009, 5:36 AM
  4. [2.0rc1] more odd behavior of nested panels.
    By jay@moduscreate.com in forum Ext 2.x: Bugs
    Replies: 12
    Last Post: 14 Nov 2007, 8:40 AM

Thread Participants: 21