PDA

View Full Version : Slow rendering of custom control



marius123
15 Mar 2011, 12:57 AM
Hi,

I have a big problem with dinamic creation and rendering of a custom control. It is a time problem,in my opinion is too slow..to dinamic add 20 times my custom control it takes 3 seconds and i do not understand why. So i have an control wich contains a title(label), a value(textbox ) and 4 buttons..and i want to add this control dinamic on a container or panel..here is my code


MyAsset=Ext.extend(Ext.Container, {


initComponent: function() {

this.items = [
{

xtype:'container',
title : '',
height : 30,
width : 290,
border : false,


items : [{
layout : 'column',
border : false,
width : 290,
items : [{
columnWidth : 0.3,
border : false,
bodyStyle : 'padding-top:7px',
items : [{
xtype : 'label',
tooltip : 'Expand All Members',
text : this.title,
anchor : '98%'

}]
}, {
columnWidth : 0.1,
border : false,
bodyStyle : 'padding-top:4px;' ,
items : [{
xtype : 'button',
iconCls : 'btnMinusClass',
anchor : '98%',
tooltip : 'Decrease',
tooltipType : 'title'

}]
}, {
columnWidth : 0.3,
border : false,
bodyStyle : 'padding-top:5px;' ,
items : [{
xtype : 'numberfield',
value : this.value,
anchor : '98%',
height : 20,
minValue : 0,
maxValue : 100,
allowDecimals : true,
decimalPrecision : 1,
allowPercent : true,
cls : 'myNumberField'
}]
}, {
columnWidth : 0.1,
border : false,
bodyStyle : 'padding-top:4px',
items : [{
xtype : 'button',
tooltip : 'Increase',
tooltipType : 'title',
iconCls : 'btnPlusClass',
anchor : '98%'

}]

}, {
columnWidth : 0.1,
cls : 'myButton',
border : false,
bodyStyle : 'padding-top:4px;',
items : [{
xtype : 'button',
tooltip : 'Fix',
iconCls : 'fixedBtnClass',
enableToggle : true,
anchor : '98%'

}]

},

{
columnWidth : 0.1,
border : false,
bodyStyle : 'padding-top:4px' ,
items : [{
xtype : 'button',
height : 10,
anchor : '98%',
cls : 'myButton',
tooltip : 'Show in history',
iconCls : 'btnShowClass',
enableToggle : true,
disabled:true
}]
}]
}]
}];
MyAsset.superclass.initComponent.call(this);
}


});
Ext.reg('myAsset',MyAsset);

......

for (i=0;i<=22;i++)
{
var myAss1=new MyAsset({
renderTo:'portofolioItem',
title:'test'+i
})

}

...where portofolioItem is a container or a panel..

..has anybody any ideea why needs 3 seconds to render the 23 elements?