Hybrid 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
    16
    Vote Rating
    0
    tprodigy1 is on a distinguished road

      0  

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

    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

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    16
    Vote Rating
    0
    tprodigy1 is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    49
    Vote Rating
    2
    mstijak is on a distinguished road

      0  

    Default


    Quote Originally Posted by tprodigy1 View Post
    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.
    Checkout Dextop or Pecunia demo.

  5. #5
    Sencha User
    Join Date
    Jan 2010
    Posts
    65
    Vote Rating
    0
    Aero is on a distinguished road

      0  

    Default


    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

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,120
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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.

  7. #7
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    381
    Vote Rating
    41
    rich02818 is an unknown quantity at this point

      0  

    Default


    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.

    Quote Originally Posted by Aero View Post
    ..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..

  8. #8
    Sencha User Mycoding's Avatar
    Join Date
    May 2010
    Location
    Russia, Volgograd
    Posts
    460
    Vote Rating
    0
    Mycoding is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    46
    Vote Rating
    0
    paipai is on a distinguished road

      0  

    Default


    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 ?

  10. #10
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    381
    Vote Rating
    41
    rich02818 is an unknown quantity at this point

      0  

    Default


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


    Quote Originally Posted by paipai View Post
    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 ?

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