PDA

View Full Version : Placing TabPanel on layout



MoShAn480
25 Apr 2007, 12:44 PM
Hi,

i have a layout created using a border layout. On the south portion of my layout, i want to add the TabPanel. The TabPanel will allow dynamic tabs to be created and removed. I have the following code but does not work:

var subLayout = new Ext.BorderLayout('west', {

hideOnLayout: true,

north: {
initialSize: 27,
split:false,
titlebar: false
},
center: {
split:false,
titlebar: false,
autoScroll:true,
closeOnTab: true,
tabPosition: 'bottom',
alwaysShowTabs: false,
collapsible:false,
animate: true,
closable:false
},

south: {
split:true,
titlebar: false,
autoScroll:true,
closeOnTab: true,
tabPosition: 'bottom',
alwaysShowTabs: false,
minSize: 100,
maxSize: 200,
initialSize: 100
}
});

var chatSessionTabs = new Ext.TabPanel('typeMessage');

chatSessionTabs.addTab('script', "View Script");
chatSessionTabs.addTab('markup', "View Markup");

subLayout.add('north', new Ext.ContentPanel('chatLinks', 'chatLinks'));
subLayout.add('center', new Ext.ContentPanel('chatMessages', 'chatMessages'));

subLayout.add('south', chatSessionTabs);
subLayout.add('south', new Ext.ContentPanel('typeMessage', 'typeMessage'));


Please help me, since i am assuming this is possible but can't seems to figure out how exactly.

Thanks!

tryanDLS
25 Apr 2007, 12:54 PM
You don't have to create a TabPanel in this case. Adding multiple panels to a region will automatically convert them to a tabs. Look at the Complex layout example.

MoShAn480
25 Apr 2007, 1:39 PM
I see, you are right it is doing that. So i get a reference to that tab panel now and i am able to add new tab items. It does seems to require that at least one item be present, other wise it will not convert it to a tab panel. For example, lets say when my application loads, there are no tabs to display. Then when i try to create a tab, it complains since it is not a tabbed panel. For this reason maybe it would help if i explicitly make an empty tabbed panel to start with and place it in the layout? Any thoughts or help on this would be great!

tryanDLS
25 Apr 2007, 3:56 PM
From the LayoutRegion doc alwaysShowTabs:true (http://extjs.com/deploy/ext/docs/output/Ext.LayoutRegion.html#config-alwaysShowTabs)

MoShAn480
25 Apr 2007, 4:32 PM
I have the following code:


var subLayout = new Ext.BorderLayout('west', {

hideOnLayout: true,

north: {
initialSize: 27,
split:false,
titlebar: false
},
center: {
split:false,
titlebar: false,
autoScroll:true,
closeOnTab: true,
tabPosition: 'bottom',
alwaysShowTabs: false,
collapsible:false,
animate: true,
closable:false
},

south: {
split:false,
titlebar: false,
autoScroll:false,
closeOnTab: true,
tabPosition: 'bottom',
alwaysShowTabs: true,
minSize: 100,
maxSize: 100,
initialSize: 100
}
});

subLayout.add('north', new Ext.ContentPanel('chatLinks', 'chatLinks'));
subLayout.add('center', new Ext.ContentPanel('chatMessages', 'chatMessages'));
//subLayout.add('south', new Ext.ContentPanel('typeMessage', 'John Doe'));

var panel = new Ext.NestedLayoutPanel(subLayout);
layout.add('west', panel);

layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('center', new Ext.ContentPanel('userProfile', {title: 'User Profile', closable: true}));
layout.add('center', new Ext.ContentPanel('userHistory', {title: 'User History', closable: true}));
layout.add('center', new Ext.ContentPanel('myChats', {title: 'My Chats', closable: true}));
layout.add('center', new Ext.ContentPanel('heatTicket', {title: 'HEAT Ticket', closable: true}));
layout.getRegion('center').showPanel('userProfile');

layout.endUpdate();


var southRegion = subLayout.getRegion('south');
chatSessionTabs = southRegion.getTabs();
chatSessionTabs.addTab('script', "View Script", 'Content', true);

This throws an error stating that chatSessionsTab is not valid. if I uncomment the line:

//subLayout.add('south', new Ext.ContentPanel('typeMessage', 'John Doe'));

then it works juts fine. So it seems that the empty tab panel does not become a tabPanel if nothing is added to it initially. Let me know if i am missing something.

tryanDLS
25 Apr 2007, 5:00 PM
If you have not added a panel to a region there are no tabs - getTabs returns a null, so your addTab call is bogus. You don't need to call addTab, you just add ContentPanels to the region. Internally, they converted to tabs.

MoShAn480
26 Apr 2007, 8:53 AM
Oh ok, this is making more sense now. I can no create the tab, but is there any way i can make that closeable too when i create it?

MoShAn480
26 Apr 2007, 8:58 AM
Oh I got i figured out. The follwoing works:

new Ext.ContentPanel('typeMessage', {title:'John Doe', closable: true}, 'Content')

Thanks for your help and push in the right direction!

ajaxE
25 Sep 2007, 7:35 PM
It seems that I cannot dynamically add two panels into a region when clicking a button. Please let me know if you have any inside.

Thanks!

ajaxE
25 Sep 2007, 8:14 PM
I found out how to do it. It's same as the normal way as you guys described. It was my mistake to click a wrong button therefore nothing was shown up.

thanks!