PDA

View Full Version : slow performance of container during layout updation



SachinN
7 Dec 2012, 10:27 AM
/***************************************************************************
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
9 Dec 2012, 8:11 AM
Your code isn't legible, can you use BBCode CODE tags so it keeps the indention so I can read it easier?

SachinN
10 Dec 2012, 10:58 AM
http://www.ecardmax.com/hoteditor/data:image/png;base64,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



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

});
40686