PDA

View Full Version : Panel will not render until resize



RobertT
5 Jul 2010, 1:05 PM
Hi everybody
I have this issue i'm dealing with for many hours now:

I have a viewport with north, west and center
in west i have a treeview menu and in center - a panel where i load pages based on the menu from the left

This is my viewport:

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
contentEl : 'north',
height: 125
}), {
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: main_menu,
split: true,
width: 213,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
items: [tree]
},
new Ext.Panel({
id: 'mainPanel',
title: welcome_dashboard_title,
region: 'center',
margins: '0 5 0 0',
autoLoad: { url: "dashboard/welcome", scripts: true },
layout: 'anchor'
})]
});


The problem appears when i click on an option from the menu that loads a page with this piece of javascript


Ext.getCmp('mainPanel').add(
[
{
xtype: 'button',
text: import_excel_file,
id: 'btnImport',
icon: 'img/page_white_excel.gif',
style: 'margin: 20px 0 0 25px',
handler: function() { }
}
]);

The button added in the center panel does not show, until i resize the browser or collapse west or south panel.

With this functions i load pages into the center panel:

function unMask() {
Ext.getCmp('mainPanel').doLayout();
}

function openTab(vAttr) {
myPanel = Ext.getCmp('mainPanel');
myPanel.removeAll(true);
myPanel.load({
url: vAttr.page,
scripts: true,
callback: unMask
});
myPanel.setTitle (vAttr.text, vAttr.iconCls);
}

Any idea will be greatly appreciated
Thanks

sissonb
18 Jul 2011, 9:51 AM
I am having the same issue. Any progress on this?

jratcliff
18 Jul 2011, 10:48 AM
whenever you add items to a container dynamically you need to call doLayout(). So change your code to this:



var mainPanel = Ext.getCmp('mainPanel');
mainPanel.add([
{
xtype: 'button',
text: import_excel_file,
id: 'btnImport',
icon: 'img/page_white_excel.gif',
style: 'margin: 20px 0 0 25px',
handler: function() { }
}
]);
mainPanel.doLayout();