PDA

View Full Version : Need help with layout



mrkadakia
6 Jul 2009, 1:54 PM
Hi all -
I have created the following layout:


// Global variables
var viewPort = null;

// Create namespace
Ext.namespace('layout');

// Create application
Ext.onReady(function() {

// Private variables
var browseTree;
var homeNode;
var defaulttab;

viewPort = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Layout</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
},{
region:'west',
title: 'Tree Browser',
collapsible: true,
split:true,
width: 300,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:0,
tabPosition:'bottom',
items:[{
title: 'Tree Browser',
xtype: 'treepanel',
id: 'browseTree',
autoScroll:true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode(explorerData),
rootVisible: true
}, {
html: '<table cellspacing="10"><tr><td>Enter the text to be searched:</td></tr><tr><td><input type="text" name="searchText" id="searchText" value="" size="30"/></td></tr><tr><td><input type="submit" name="submitSearch" id="submitSearch" value="Search" /></td></tr></table>',
title: 'Search',
autoScroll:true
}]
})
},{
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
width:'auto',
height:'auto',
minTabWidth:115,
tabWidth:220,
resizeTabs: true,
enableTabScroll:true,
activeTab: 0,
items: {
title: 'Tab 1',
id: 'tab1',
closable:true
}
}, {
region: 'south',
title: 'Information',
height: 100,
minSize: 100,
maxSize: 200,
html: 'This panel should not be span the whole width of the viewport (Browser + Tab). It should be present only under the Tab.',
collapsible: true,
split:true
}
]
});

browseTree = viewPort.findById('browseTree');
homeNode = browseTree.getNodeById('Node1');
homeNode.select();

defaulttab = viewPort.findById('Node1');
}); // End of application


Here is my question:
Currently, with this layout the SOUTH panel spans across the entire width of the page (width of the Tree browser + width of the Tab panel). I would like the SOUTH panel to span ONLY across the Tab Panel and NOT across the Tree browser. i.e. The panel should be in the CENTER region below the Tab panel at the bottom.

This SOUTH panel should be independent of the Tab panel. Even if a new tab is opened, the SOUTH panel should have the same content that was there when the previous tab was active.

I have attached 3 files (One HTML file and 2 JS files). I have not included ext2.2 folder. Please include it under Layout_files folder when trying to reproduce the issue.

Thanks

catacaustic
6 Jul 2009, 4:17 PM
To acheive this you need to embed extra layouts in there.

What you need to do is set up a border layout area with the south region and the tab panel in the centre region. Then you add that to the main border layout region's centre region and have the north and west regions set up in there.

That should give you the effect that you're after.

mrkadakia
6 Jul 2009, 5:49 PM
Hi catacaustic,
I do remember trying it out but the whole layout got screwed up. I will try it out again and post it if it does not work. I would appreciate if you could assist me in modifying the posted code to suit the requirements that you mentioned in your email below.

Thanks

mrkadakia
7 Jul 2009, 7:38 AM
The South panel does not automatically appear at the bottom. I have to manually increase the height of the Tab Panel so that the South panel goes to the bottom. Please assist me on how to specify the South Panel to go to the bottom. Here is the updated code:


{
region: 'center',
items:[
new Ext.TabPanel({
id: 'tabs',
width:'auto',
height: 500,
minTabWidth:115,
tabWidth:220,
resizeTabs: true,
enableTabScroll:true,
activeTab: 0,
items: {
title: 'Node1',
id: 'Node1',
closable:true
}
}), {
title: 'Information',
height: 100,
minSize: 100,
maxSize: 200,
html: 'This panel should not be span the whole width of the viewport (Browser + Tab). It should be present only under the Tab.',
collapsible: true,
split:true
}
]
}

mrkadakia
7 Jul 2009, 10:27 AM
I was finally able to figure it out based on comments from catacaustic. Here is the code for the center region:



{
region: 'center',
layout: 'border',
items:[{
xtype: 'tabpanel',
region: 'center',
id: 'tabs',
width:'auto',
height: 'auto',
minTabWidth:115,
tabWidth:220,
resizeTabs: true,
enableTabScroll:true,
activeTab: 0,
items: {
title: 'Node1',
id: 'Node1',
closable:true
}
}, {
region: 'south',
title: 'Information',
height: 250,
html: 'Information',
collapsible: true,
split:true
}
]
}