1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    Mumbai
    Posts
    2
    Vote Rating
    0
    sanketm is on a distinguished road

      0  

    Default Unanswered: Performance Issues in Nesting

    Unanswered: 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    Mumbai
    Posts
    2
    Vote Rating
    0
    sanketm is on a distinguished road

      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

Thread Participants: 1