/***************************************************************************
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
}
]
}
]
});
}


});