Results 1 to 3 of 3

Thread: Performance Issues in Nesting

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    Mumbai
    Posts
    2
    Vote Rating
    0
      0  

    Default Performance Issues in Nesting

    I have tried a simple code in 3.4 version and 4.1 with almost 100 controls and 3 level nesting.
    And found that ext 4.1 is taking more time to render than 3.4.

    But if i avoid the nesting and render the same 100 controls the scenario is different.
    It takes hardly 2seconds for ext 4.1 to render these controls.

    I have tested this on mozilla as well as on google chrome with 100,200 and 400 controls.
    And results are same.

    With Nesting: 3.4 is taking less time than 4.1
    Without Nesting: 4.1 is taking less time than 4.1

    Why is this difference?

    I am attaching the code for reference
    Code:
    Ext.onReady(function(){
    var items3 = [];
    
    
    for(var i = 0; i < 100; i++) {
    
    
      var items1 = [];
        var items2 = [];
       items1.push(Ext.create('Ext.Container',{
            labelWidth: 75, 
            //bodyStyle:'padding:5px 5px 0',
            defaultType: 'textfield',
    
    
            items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, {
                    fieldLabel: 'Time',
                    name: 'time'
                }
            ]
        }));
    
    
            items2.push(Ext.create('Ext.Container',{
            labelWidth: 75, 
            //bodyStyle:'padding:5px 5px 0',
    
    
            items: [{
                xtype:'fieldset',
                checkboxToggle:true,
                title: 'User Information',
                defaultType: 'textfield',
                collapsed: true,
                items :[{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last'
                    },{
                        fieldLabel: 'Company',
                        name: 'company'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }
                ]
            },{
                xtype:'fieldset',
                title: 'Phone Number',
                collapsible: true,
                defaultType: 'textfield',
                items :[{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }
                ]
            }]
        }));
        items3.push(Ext.create('Ext.form.Panel',{
                    frame:true,
                    title: 'Multi Column, Nested Layouts and Anchoring',
                    bodyStyle:'padding:5px 5px 0',
                    autoScroll:true,
                    items: [{xtype: 'container',
                        height:200,
                        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
                        }]
                    }]
                 }));
        }
     
        var viewport = Ext.create('Ext.Viewport', {
            layout: 'border',
            items: [
            Ext.create('Ext.Panel', {
                region: 'center', 
                autoScroll: true,
                layout: 'anchor',
                items:items3
            })]
        });
    });
    Sanket M
    Golden Source

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,070
    Answers
    3976
    Vote Rating
    1394
      0  

    Default

    Ext JS 4 does a lot more than Ext JS 3. Also Ext JS 3 was an old framework when Ext JS 4 came out which is just a year and a half old so as time goes on the framework will get faster and faster. 4.1 is much faster than 4.0 for instance.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    Mumbai
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Thanks for the reply

    But my application needs much of nesting.
    It includes separate logical grouping of fields and these groups are put inside panels.

    The other features of 4.1 are impressive but as far as performance is considered, it is sluggish.

    They have improved time taken for rendering of grid and other controls.
    But nested panel rendering still has performance problems.

    I have tried graphs, grids and forms with different layouts. It works fine with less than 100 controls.
    But as the number of controls goes above 100 performance drops drastically.
    Sanket M
    Golden Source

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •