HTML Code:
/*
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
}
]
}
]
});
}
});
slow performance of container during layout updation
Reply With Quote
