PDA

View Full Version : Border Layout question



mgoncharov
4 Feb 2010, 9:14 AM
Is it possible to apply borderLayout to the specific <div> tag on the page ?

I have the simple html file with standard header, which I would like to keep and just one div.

<table>
<tr><td>Testing new Layout for Order Tracking</td></tr>
<tr><td>
<div id="id_orderTracking"></div>
</td>
</tr>
</table>

Here's the main code I have at this point:

var searchPanel = new Ext.Panel({
title : 'Order Tracking',
region : 'west',
margins : '5 0 5 5',
cmargins : '5 5 5 5',
width : 270,
minSize : 250,
maxSize : 320,
layout :'fit',
autoScroll :true,
collapsible: true,
items:[orderSearchFm]
});

var listPanel=new Ext.Panel({
title : 'Orders',
region :'north',
collapsible : true,
layout :'fit',
height : 270,
split : true,
items :[orderGrid]
});

var detailsPanel=new Ext.Panel({
title : 'Order Details',
region :'center',
collapsible : true,
split : true,
layout :'fit',
height : 300
});

var centerPanel = new Ext.Panel({
margins : '0 0 0 0',
region :'center',
layout :'border',
border : false,
items :[listPanel,detailsPanel]
});

var containerPanel =new Ext.Panel({
header :false,
applyTo :'id_orderTracking',
title :'Menu',
border :false,
layout :'border',
items:[
searchPanel,
centerPanel
]
});

var viewport = new Ext.Viewport({
layout :'fit',
resizable:true,
items:[
containerPanel
]
});

Unfortunately the final result is applied to the document body instead of the specific div (id_orderTracking).

Please advice...Thanks

Mikhail

ckr
4 Feb 2010, 1:54 PM
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

From the docs ;)

mgoncharov
4 Feb 2010, 1:58 PM
Can I use borderLayout and don't occupy the whole page ?

Can I create the nested panel (container) and appy it to specific div ?

Thanks

Mikhail

ckr
5 Feb 2010, 2:19 PM
The Viewport goes to the body. Any panel can have a borderlayout.