PDA

View Full Version : FormPanel inside TabPanel takes 10 seconds to render



marcostimm
23 Feb 2012, 10:23 AM
I want to add a FormPanel in a new tab. But it's take 10 seconds do Render (not load data). The browser freeze (test on Chrome and FF without debug/firebug)
It's happen (in part) because checkboxgroup. When I remove that part of code, takes 3 seconds.

The form is not so long. I try everything and search for hours in this forum... but nothing!

I try to change layout anchor to fixed width... but nothing too.

Here is a part of code:



GI.FormTest = Ext.extend(Ext.form.FormPanel,{
region: 'center',
frame: true,
margin: '0 0 0 0',
border: false,
autoScroll: true,
bodyStyle: 'padding: 10px;',
labelAlign: 'left',
waitMsgTarget: true,
url: 'inc/php/GI.php',
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'fieldset',
width: 700,
title: 'Dados',
items: [{xtype: 'textfield',name: 'nome',fieldLabel: 'Nome',width:400,allowBlank: false},
new Ext.form.ComboBox({
fieldLabel: 'Tipo de Imˇvel',
hiddenName:'id_tipo',
store: new Ext.data.Store({autoLoad:true, proxy: new Ext.data.HttpProxy({url: 'inc/php/GI.php?c=Imovel&m=getTiposImoveis'}),reader: new Ext.data.XmlReader({record: 'tipos_imoveis'}, ['id_tipo_imovel','tipo_imovel'])}),
width: 400,
loadingText: 'Carregando...',
valueField: 'id_tipo_imovel',
displayField: 'tipo_imovel',
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText:'selecione...',
selectOnFocus:true,
allowBlank: false
}),{
xtype: 'checkbox',
fieldLabel: 'Site',
name: 'publicar',
checked: true,
inputValue: 1
}
]
},{
xtype: 'fieldset',
width: 700,
title: 'Address',
items: [
new Ext.form.ComboBox({
name: 'estado',
fieldLabel: 'Estado',
hiddenName:'id_uf',
store: new Ext.data.Store({autoLoad: true, proxy: new Ext.data.HttpProxy({url: 'inc/php/GI.php?c=Endereco&m=getUF'}),reader: new Ext.data.XmlReader({record: 'ufs'}, ['id_uf','id_uf'])}),
width: 100,
value: 'ES',
loadingText: 'Carregando...',
valueField: 'id_uf',
displayField: 'id_uf',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'selecione...',
selectOnFocus:true,
allowBlank: false,
listeners: {change:function(){sugestaoEndereco.baseParams.uf=this.value}}
}),{
xtype: 'fieldset', width: 700, title: 'Details',
items: [{
xtype: 'checkboxgroup',
width: 600,
fieldLabel: 'C˘modos',
itemCls: 'x-check-group-alt',
columns: 3,
items: [
{boxLabel:'Sala',name:'sala',inputValue:1},
{boxLabel:'Living',name:'living',inputValue:1},
{boxLabel:'Copa',name:'copa',inputValue:1},
{boxLabel:'Varanda',name:'varanda',inputValue:1},
{boxLabel:'Varanda Gourmet',name:'varanda_gourmet',inputValue:1},
{boxLabel:'Cozinha',name:'cozinha',inputValue:1},
{boxLabel:'DCE',name:'dce',inputValue:1},
{boxLabel:'┴rea de Servišo', name:'area_de_servico',inputValue:1},
{boxLabel:'Lavabo', name:'lavabo',inputValue:1},
{boxLabel:'Closet',name:'closet',inputValue:1},
{boxLabel:'Home Office',name:'home_office',inputValue:1}
]
}]
}]
}]
});
GI.FormTest.superclass.initComponent.call(this);
}
});


note: this is just a part of code... but is not too long then that.

And use this code for open a tab:


tab.add({title: 'teste',layout: 'fit',iconCls: 'imovel16',closable: true, items: new GI.FormTest({id: 'teste'})}).show();

Somebody know why?

When I click to open this tab, the CPU go up to 100% for 7 seconds. It`s really crazy.

mitchellsimoens
23 Feb 2012, 10:53 AM
This code works instantly for me with chrome:


Ext.ns('GI');

GI.FormTest = Ext.extend(Ext.form.FormPanel,{
region: 'center',
frame: true,
margin: '0 0 0 0',
border: false,
autoScroll: true,
bodyStyle: 'padding: 10px;',
labelAlign: 'left',
waitMsgTarget: true,
url: 'inc/php/GI.php',
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'fieldset',
width: 700,
title: 'Dados',
items: [{xtype: 'textfield',name: 'nome',fieldLabel: 'Nome',width:400,allowBlank: false},
new Ext.form.ComboBox({
fieldLabel: 'Tipo de Imˇvel',
hiddenName:'id_tipo',
store: new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'inc/php/GI.php?c=Imovel&m=getTiposImoveis'}),reader: new Ext.data.XmlReader({record: 'tipos_imoveis'}, ['id_tipo_imovel','tipo_imovel'])}),
width: 400,
loadingText: 'Carregando...',
valueField: 'id_tipo_imovel',
displayField: 'tipo_imovel',
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText:'selecione...',
selectOnFocus:true,
allowBlank: false
}),{
xtype: 'checkbox',
fieldLabel: 'Site',
name: 'publicar',
checked: true,
inputValue: 1
}
]
},{
xtype: 'fieldset',
width: 700,
title: 'Address',
items: [
new Ext.form.ComboBox({
name: 'estado',
fieldLabel: 'Estado',
hiddenName:'id_uf',
store: new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'inc/php/GI.php?c=Endereco&m=getUF'}),reader: new Ext.data.XmlReader({record: 'ufs'}, ['id_uf','id_uf'])}),
width: 100,
value: 'ES',
loadingText: 'Carregando...',
valueField: 'id_uf',
displayField: 'id_uf',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'selecione...',
selectOnFocus:true,
allowBlank: false,
listeners: {change:function(){sugestaoEndereco.baseParams.uf=this.value}}
}),{
xtype: 'fieldset', width: 700, title: 'Details',
items: [{
xtype: 'checkboxgroup',
width: 600,
fieldLabel: 'C˘modos',
itemCls: 'x-check-group-alt',
columns: 3,
items: [
{boxLabel:'Sala',name:'sala',inputValue:1},
{boxLabel:'Living',name:'living',inputValue:1},
{boxLabel:'Copa',name:'copa',inputValue:1},
{boxLabel:'Varanda',name:'varanda',inputValue:1},
{boxLabel:'Varanda Gourmet',name:'varanda_gourmet',inputValue:1},
{boxLabel:'Cozinha',name:'cozinha',inputValue:1},
{boxLabel:'DCE',name:'dce',inputValue:1},
{boxLabel:'┴rea de Servišo', name:'area_de_servico',inputValue:1},
{boxLabel:'Lavabo', name:'lavabo',inputValue:1},
{boxLabel:'Closet',name:'closet',inputValue:1},
{boxLabel:'Home Office',name:'home_office',inputValue:1}
]
}]
}]
}]
});
GI.FormTest.superclass.initComponent.call(this);
}
});

Ext.onReady(function() {

new Ext.TabPanel({
renderTo : document.body,
width : 600,
height : 600,
activeTab : 0,
items : [
new GI.FormTest({
title : 'Test'
})
]
});

});

marcostimm
23 Feb 2012, 12:33 PM
When I run the complete code with a button to open in a Tab, the CPU goes to 100% for 8 seconds, then load de data with more 1 ou 2 seconds.

Did you see anything wrong or something that compromise performance in this code?

mitchellsimoens
23 Feb 2012, 12:36 PM
Not in that bit of code.

marcostimm
24 Feb 2012, 8:38 AM
I discover something new... The problem is NOT in the Form...
This form is open when doubleClick is fired in a Grid row.

Test:
1. I put this form to open directly by a menu button. Open normal. 1 second (or less).
2. doubleClick inside a row in the Grid. Takes 8-9 seconds to render with the some code of test 1.

The Code in doubleClick grid event is:



initEvents: function(){
GI.GridImoveis.superclass.initEvents.call(this);
this.on('rowdblclick', this.onRowClick, this);
},
onRowClick: function(sm, rowIdx, r){
var record = sm.getStore().getAt(rowIdx);
var tab = Ext.getCmp('PainelTab');
if(tab.findById('t'+record.id)){
var el = tab.findById('t'+record.id);
tab.setActiveTab(el);
} else {
tab.add({title: record.get('nome'),layout: 'fit',id: 't'+record.id,iconCls: 'imovel16',closable: true, items: new GI.FormImovell({id: 'f'+record.id})}).show();
}
}




Why this simple code takes 8-9 seconds to render a Tab? And when I put the some code (tab.add...) in a button (or anything else), it`s open in 1 second. That`s the big question!

marcostimm
24 Feb 2012, 11:26 AM
More tests...

I add a console.info in some places of code to show h:m:s of events:

Grid:
dblCLick (on grid row to open a form inside a tab): 17:16:05

Form on Tab:

initComponent: 17:16:05

Render: 17:16:06

onRender: 17:16:06


afterRender: 17:16:06

But, the tab just show at 17:16:13... 8 seconds after dblClick.

I dont know why... if the code render in 1 little second, why just show in 8 seconds?