PDA

View Full Version : Help Using BorderLayout


Mark Wells
4 Oct 2007, 11:01 AM
I'm my app I have 3 regions, north being the toolbar, south being used for alerts and tips and center for the "dialogs"... ahhh the center panel it getting me sick :D

In the initialization of the app the center region is barely empty, just to have a background image defined in css, that's done and perfectly working. (=D> I deserve :)):)))

Let me starting showing how I'm dealing with BorderLayout, just for the sake of knowledge any item of the menu in the toolbar will add a new tab on the center region.

The MainLayout is defined as above. It is in the INIT Section


mainLayout = new Ext.BorderLayout('container',{
north:{initialSize:49, split:false, titlebar:true, title:'<b>.:: Sistema WebSiaux ::.</b>', margins:{top:0,bottom:2,right:0,left:0}},
south:{animate:true, autoScroll:true, collapsible:true, initialSize:80, split:false, title:'<b>.:: Dicas de Uso ::.</b>', titlebar:true},
center:{autoScroll:true, titlebar:true}
});
mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('toolbar',{toolbar:appToolbar}));
mainLayout.add('south', new Ext.ContentPanel('statusBar',{autoScroll:true, closable:false, fitToFrame:true}));
mainLayout.add('center', new Ext.ContentPanel('content',{autoScroll:true, closable:true, fitToFrame:true}));
mainLayout.endUpdate();


Let's suppose that I click the item menu as explained above. Pretty simple.


new Ext.menu.Item({
text:'<b>Ve&iacute;culo Oficial</b>',
id:'tb_cmdTabVeiOfi',
icon:'images/list-items.gif',
handler: this.showTabVeiOfi
})


I'm expecting a new Tab called Veiculos Oficiais and inside this tab I'm expecting a grid that shows some data that comes from a database. BUT (OMG we always have a BUT in this cases... /:)) when I close this tab and try to reopen it I get an error as showed in the picture of firebug below.


showTabVeiOfi: function(){
...
...
var ds ...;
var cm ...;
var grid = new Ext.grid.Grid('veiOfiGridEditor', {...});//veiOfiGridEditor is the target div where the grid will be rendered althought I'm not using a GridEditor

//ADDING THE PANEL IN THE CENTER REGION
mainLayout.beginUpdate();
mainLayout.add('center', new Ext.ContentPanel('veiOfiCad',{title:'<b>Ve&iacute;culo Oficial</b>', autoScroll:true, closable:true, fitToFrame:true}));
mainLayout.endUpdate();

//ADDING THE "NESTED" PANEL WITHIN THE CENTER REGION
var innerLayout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(veiOfiGrid)]
}
}, 'veiOfiGrid');
grid.render();

//more configurations for the grid
...
...
};


FIREBUG IMAGE 1:
http://img206.imageshack.us/img206/6491/fb1zq3.jpg

FIREBUG IMAGE 2:
http://img205.imageshack.us/img205/2446/fb2ji3.jpg

And finally the HTML of this page


<body>
<div id="container">
<div id="toolbar" class="x-layout-inactive-content"></div>
<div id="content" class="x-layout-inactive-content">
<div id="veiOfiCad" class="x-layout-inactive-content">
<div id="veiOfiGrid"></div>
<div id="veiOfiGridEditor"></div>
</div>
</div>
<div id="statusBar" class="x-layout-inactive-content"></div>
</div>
</body>


I hope someone can help me.
Thanks in advance

Mark Wells
Mark Wells
4 Oct 2007, 2:40 PM
No Idea??
amackay11
5 Oct 2007, 4:29 AM
Ummm..:-?... should

veiOfiGrid.render();
be ?

grid.render();


'grid' is your grid variable.
Mark Wells
5 Oct 2007, 4:50 AM
Ummm..:-?... should

veiOfiGrid.render();
be ?

grid.render();

'grid' is your grid variable.

You're right, and you're wrong. :D

That's not the problem, in fact in my code the ds is named veiOfiDS, cm is veiOfiCM and grid is veiOfiGrid.

I changed the code in this thread just for easy reading, but I forgot to change that line of the code, leading to your answer.

Thanks anyway, if this was the problem, problably the solution would be your sugestion... I'm going to change the original post.

Again, when I first click the menu item everything is ok, the grid is rendered correctly and everything else... But when I close this tab and try to reopen it I got a problem. It looks like the <div id="veiOfiGridEditor"> was erased from the DOM when I close the tab, which leads to my problem.

Any other idea??

Thanks in advance.
Mark Wells
amackay11
5 Oct 2007, 5:33 AM
more 'hmmm'.

If you have grid.destroy(true) when hiding the grid then the docs say it removes the element. http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html#destroy.

The other thing you might look at is to not create the grid on every call to showTabVeiOfi, just hide the panel. I use grid.getView().refresh(); to do grid 'rebuilds'.