PDA

View Full Version : Layout border into panel of a tabpanel



alfa19
1 Aug 2012, 7:02 AM
Hi everyone.

I want to create a panel with 2 child: one collpsible on the west and the other that fit the rest of the space.
After i want to add that panel to a tab panel.

This is my code:


test1 = new Ext.Panel({
region: 'west',
width: 100,
title: 'Test1'
});

test2 = new Ext.Panel({
region: 'center',
title: 'Test2'
});

mainPanel = new Ext.Panel({
title: 'Main Panel',
autoScroll:true,
autoWidth:true,
frame: false,
layout: 'border',
items: [
test1, test2
],
tbar: new Ext.Toolbar({ ... }),
bbar: new Ext.PagingToolbar({ ... })
});

tabpanel.add(mainPanel);

and this is what i obtain:

37674
why? how can i put two panel side by side?

Thanks

scottmartin
1 Aug 2012, 10:35 AM
This works fine for me:



test1 = new Ext.Panel({
region: 'west',
width: 100,
title: 'Test1'
});

test2 = new Ext.Panel({
region: 'center',
title: 'Test2'
});

mainPanel = new Ext.Panel({
title: 'Main Panel',
height: 400,
width: 400,
autoScroll: true,
autoWidth: true,
frame: false,
layout: 'border',
renderTo: Ext.getBody(),
items: [
test1, test2
]
});


37679

Scott

alfa19
3 Aug 2012, 1:34 AM
i must add my panel to a tab not to body...for the rest the code is identical to my

sword-it
3 Aug 2012, 2:53 AM
Hi alfa19,
Try the following code:




Ext.onReady(function () {
test1 = new Ext.Panel({
region: 'west',
collapsible: true,
collapsed: false,
floatable: false,
width: 100,
title: 'Test1'
});
test2 = new Ext.Panel({
region: 'center',
title: 'Test2'
});


var mainPanel = new Ext.Panel({
title: 'Main Panel',
autoScroll: true,
autoWidth: true,
frame: false,
layout: 'border',
items: [
test1, test2
],
tbar: [{text: 'add new'}],
bbar: new Ext.PagingToolbar({ text: 'click me' })
});
var tabpanel = new Ext.TabPanel({
renderTo: Ext.getBody()
, height: 400 // define the height & width according to your need
, width: 800
});
tabpanel.add(mainPanel);
tabpanel.activate(mainPanel); // to activate the currently added tab
});