slow performance of container during layout updation

[SachinN]

/***************************************************************************
Below code will create sub panels(lets say 200 or more ) inside main outer container at run time. now when users scroll the main outer container "subpanel" which is visible to user & within the region of main container is loaded with new data("html" or other)

Now, the problem is that when "subpanel" childs( let say panel, 3 level nested ) perfom any updation ( expand | collapse or other ) it takes too much time to perform layout updation.

Please, provide any suitable solution.
*****************************************************************************/


Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',


autoRender: true,
autoShow: true,
height: 800,
id: 'mypnl',
autoScroll: true,
title: 'My Panel',


initComponent: function() {
var me = this;


me.addEvents(
'scroll'
);


Ext.applyIf(me, {
listeners: {
afterrender: {
fn: me.onPanelAfterRender,
scope: me
},
scroll: {
fn: me.onMypnlScroll,
scope: me
}
}
});


me.callParent(arguments);
},


onPanelAfterRender: function(abstractcomponent, options) {
var LMe = this;


this.getTargetEl().on( 'scroll', function( e, t, opt ){
this.fireEvent( 'scroll', function( LMe, e, t, opts){} );
}, this);
Ext.Container.prototype.bufferResize = false;
abstractcomponent.load( abstractcomponent );


},


onMypnlScroll: function(eventOptions) {
/*this.getTargetEl().on( 'scroll', function( e, t, opt ){
console.log( "scrolled" );
fireEvent( String eventName, Object... args ) :
}, this);*/
},


load: function(abstractcomponent ) {
var LMe = this;


var LDATA = '<pre><code>.video {' +
'position: relative;'
+'padding-bottom: 56.25%;'
+'height: 0;'
+'overflow: hidden;'
+'}'
+'.video iframe, '
+'.video object, '
+'.video embed {'
+'position: absolute;'
+'top: 0;'
+'left: 0;'
+'width: 100%;'
+'height: 100%;'
+'}</code></pre>';


//Get Region
var LViewPortRegion = LMe.getEl().getRegion( );
console.log( LViewPortRegion );


var LMainRegion = Ext.get('mypnl').getRegion( );
console.log( LMainRegion );


Ext.suspendLayouts();


for( var i=0; i< 100; i++ ){


var LRecPanel = Ext.create('Ext.panel.Panel', {
title: 'Hello' + i,
data: LDATA,
collapsible: true,
width:600,
titleCollapse: true,
id: i,
html: '<p>World!</p>' + i,
listeners:{
afterrender:function( panel, eopts ){
var LTempRegion = panel.getEl().getRegion( );


console.log( panel.title + "::" + LMainRegion.contains( LTempRegion ) );
panel.on( 'onvisible', function( ){
//LRecPanel.setTitle( "dddddddddd" );
LMe.unregisterChild( 'onvisible', panel );
panel.update( "<div>skajkdaj kldask dkasj dklaskd jaskdjk asjdklajsd asjkdjas kjdasjdjas kjas jasjd</div>" );
//alert("visible");
} );


}
}
});


LRecPanel = LMe.GetPanel();


LRecPanel.addEvents( 'onvisible' );
LMe.registerChild( 'onvisible', LRecPanel );
abstractcomponent.add( LRecPanel );








}
Ext.resumeLayouts( true );


LMe.on( 'scroll', function( e, t, opt ){
Ext.Object.each( LMe.registeredChild, function( p_key, p_obj, regChiilds ){
console.log( p_key + "::" + p_obj.title );
p_obj.fireEvent( 'onvisible', p_obj, LMe );
} );
} );
/*
this.getTargetEl().on( 'scroll', function( e, t, opt ){


console.log( "*************************************************************************************" );
abstractcomponent.items.each( function( p1, p2, p3 ){
console.log( p1 + "::" + p2 + "::" + p3 );
var LTempRegion = p1.getEl().getRegion( );


console.log( p1.title + "::" + LMainRegion.contains( LTempRegion ) );
} );
}, this);
*/
},


constructor: function() {
this.registeredChild = {};
this.callParent( arguments );
},


registerChild: function(p_Event, p_Panel) {
var LMe = this;


LMe.registeredChild[ p_Panel.id ] = p_Panel;
},


unregisterChild: function(p_Child) {
var LMe = this;


p_Child.removeListener( 'onvisible', function(){} );
delete( LMe.registeredChild[ p_Child.id ] );
},


GetPanel: function(GetPanel) {
var me = this;
return Ext.create( 'Ext.panel.Panel', {
style: {
border: '1px solid #00dcdd',
margin: "10"
},
border: 1,
width: 600,
margin: '20 10',
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'container',
width: 100,
autoScroll: true,
layout: {
align: 'stretch',
type: 'vbox'
}
},
{
xtype: 'panel',
flex: 1,
border: 1,
style: {
border: '1px solid #00dcdd'
},
layout: {
align: 'stretch',
type: 'vbox'
},
animCollapse: false,
manageHeight: false,
items: [
{
xtype: 'container',
flex: 1,
minHeight: 50,
style: {
border: '1px solid #00dcdd'
}
},
{
xtype: 'container',
flex: 1,
minHeight: 50,
style: {
border: '1px solid #00dcdd'
}
},
{
xtype: 'container',
flex: 1,
minHeight: 50,
style: {
border: '1px solid #00dcdd'
}
},
{
xtype: 'panel',
flex: 1,
minHeight: 100,
style: {
border: '1px solid #00dcdd'
},
animCollapse: false,
collapsible: true,
title: 'My Panel',
titleCollapse: true
}
]
}
]
});
}


});

[mitchellsimoens]

Your code isn't legible, can you use BBCode CODE tags so it keeps the indention so I can read it easier?

[SachinN]

 /*
Below  code will create sub panels(lets say 200 or more ) inside main outer  container at run time. now when users scroll the main outer container  "subpanel" which is visible to user & within the region of main  container is loaded with new data("html" or other)

Now, the  problem is that when "subpanel" childs( let say panel, 3 level nested )  perfom any updation ( expand | collapse or other ) it takes too much  time to perform layout updation.In brief,

Please, provide any suitable solution.
*/

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',

    autoRender: true,
    autoShow: true,
    height: 800,
    id: 'mypnl',
    autoScroll: true,
    title: 'My Panel',

    initComponent: function() {
        var me = this;

        me.addEvents(
            'scroll'
        );

        Ext.applyIf(me, {
            listeners: {
                afterrender: {
                    fn: me.onPanelAfterRender,
                    scope: me
                },
                scroll: {
                    fn: me.onMypnlScroll,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onPanelAfterRender: function(abstractcomponent, options) {
        var LMe = this;

        this.getTargetEl().on( 'scroll', function( e, t, opt ){   
            this.fireEvent( 'scroll', function( LMe, e, t, opts){} );     
        }, this);
        Ext.Container.prototype.bufferResize = false;
        abstractcomponent.load( abstractcomponent );

    },

    onMypnlScroll: function(eventOptions) {
        /*this.getTargetEl().on( 'scroll', function( e, t, opt ){ 
        console.log( "scrolled" );   
        fireEvent( String eventName, Object... args ) :
        }, this);*/
    },

    load: function(abstractcomponent ) {
        var LMe = this;

        var LDATA = '<pre><code>.video {' +
            'position: relative;'
            +'padding-bottom: 56.25%;'
            +'height: 0;'
            +'overflow: hidden;'
        +'}'
        +'.video iframe,  '
        +'.video object,  '
        +'.video embed {'
            +'position: absolute;'
            +'top: 0;'
            +'left: 0;'
            +'width: 100%;'
            +'height: 100%;'
        +'}</code></pre>';

        //Get Region
        var LViewPortRegion = LMe.getEl().getRegion( );
        console.log( LViewPortRegion );

        var LMainRegion = Ext.get('mypnl').getRegion( );
        console.log( LMainRegion );

        Ext.suspendLayouts();

        for( var i=0; i< 100; i++ ){

            var LRecPanel = Ext.create('Ext.panel.Panel', {
                title: 'Hello' + i,
                data: LDATA,
                collapsible: true,
                width:600,
                titleCollapse: true,
                id: i,
                html: '<p>World!</p>' + i,
                listeners:{
                    afterrender:function( panel, eopts ){
                        var LTempRegion = panel.getEl().getRegion( );

                        console.log( panel.title + "::" + LMainRegion.contains( LTempRegion ) );  
                        panel.on( 'onvisible', function( ){       
                            //LRecPanel.setTitle( "new title" );
                            LMe.unregisterChild( 'onvisible', panel ); 
                             panel.update( "<div>this is updatred data....</div>" ); 
                            //alert("visible");        
                        } );

                    }
                }
            });
            LRecPanel = LMe.GetPanel();
            LRecPanel.addEvents( 'onvisible' );
            LMe.registerChild( 'onvisible', LRecPanel );
            abstractcomponent.add( LRecPanel ); 
        }
        Ext.resumeLayouts( true );

        LMe.on( 'scroll', function( e, t, opt ){ 
            Ext.Object.each( LMe.registeredChild, function( p_key, p_obj, regChiilds ){
                console.log( p_key + "::" +  p_obj.title );
                p_obj.fireEvent( 'onvisible', p_obj, LMe );  
            } );      
        } );   
        /*
        this.getTargetEl().on( 'scroll', function( e, t, opt ){ 
        abstractcomponent.items.each( function( p1, p2, p3 ){       
        var LTempRegion = p1.getEl().getRegion( );
        console.log( p1.title + "::" + LMainRegion.contains( LTempRegion ) );   
        } );   
        }, this);
        */
    },

    constructor: function() {
        this.registeredChild = {};
        this.callParent( arguments );
    },

    registerChild: function(p_Event, p_Panel) {
        var LMe = this;

        LMe.registeredChild[ p_Panel.id ] = p_Panel;
    },

    unregisterChild: function(p_Child) {
        var LMe = this;

        p_Child.removeListener( 'onvisible', function(){} );
        delete( LMe.registeredChild[ p_Child.id ] );
    },

    GetPanel: function(GetPanel) {
        var me = this;
        return Ext.create( 'Ext.panel.Panel', {
            style: {
                border: '1px solid #00dcdd',
                margin: "10"
            }, 
            border: 1,
            width: 600,
            margin: '20 10',
            layout: {
                align: 'stretch',
                type: 'hbox'
            },
            items: [
            {
                xtype: 'container',
                width: 100,
                autoScroll: true,
                layout: {
                    align: 'stretch',
                    type: 'vbox'
                }
            },
            {
                xtype: 'panel',
                flex: 1,
                border: 1,
                style: {
                    border: '1px solid #00dcdd'
                },
                layout: {
                    align: 'stretch',
                    type: 'vbox'
                },
                animCollapse: false,
                manageHeight: false,
                items: [
                {
                    xtype: 'container',
                    flex: 1,
                    minHeight: 50,
                    style: {
                        border: '1px solid #00dcdd'
                    }
                },
                {
                    xtype: 'container',
                    flex: 1,
                    minHeight: 50,
                    style: {
                        border: '1px solid #00dcdd'
                    }
                },
                {
                    xtype: 'container',
                    flex: 1,
                    minHeight: 50,
                    style: {
                        border: '1px solid #00dcdd'
                    }
                },
                {
                    xtype: 'panel',
                    flex: 1,
                    minHeight: 100,
                    style: {
                        border: '1px solid #00dcdd'
                    },
                    animCollapse: false,
                    collapsible: true,
                    title: 'My Panel',
                    titleCollapse: true
                }
                ]
            }
            ]
        });
    }

});

ContainerImg.png