PDA

View Full Version : tab panel in tab panel



joefox
21 Feb 2009, 7:56 PM
Hey everyone. I ran in to a problem, and tried a few things but cant seem to get it right.

I am using the "border" layout out. and now i have a tab with 2 colums in it, 1 column takes up .25 of the area, and the other, i wanted to be a tab panel, but can figure out how to get this to work.

The 'User Information' column is where i wanted to be a tab panel, not a table.

Thanks in advance anyone who helps :)


layout:'column',
title:'User Information',
iconCls:'user',
defaults:{
style:'padding:5px'
},
items: [{
title: 'User Profile',
iconCls:'user',
collapsible: true,
columnWidth: .25,
contentEl: 'user_information'
},{
title: 'User Information',
columnWidth: .75,
collapsible: true,
iconCls:'user',
html: 'Content'
}]
}

I tried somethingl like this,but no go.

items: [{
title: 'User Profile',
iconCls:'user',
collapsible: true,
columnWidth: .25,
contentEl: 'user_information'
},new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy',
closable:true,
autoScroll:true
}],}]

22 Feb 2009, 5:35 AM
ditch html and content el for xtype : 'tabpanel' in that .75 width column.

joefox
22 Feb 2009, 8:19 PM
ditch html and content el for xtype : 'tabpanel' in that .75 width column.


Ok i did something wrong, and cant figure out where lol, it just happend after i added my tab panel, did i do it right?


new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy',
closable:true,
autoScroll:true
},{
layout:'column',
title:'User Information',
iconCls:'user',
defaults:{
style:'padding:5px'
},
items: [{
title: 'User Profile',
iconCls:'user',
collapsible: true,
columnWidth: .25,
contentEl: 'user_information'
},{
xtype: 'tabpanel',
columnWidth: .75,
collapsible: true,
iconCls:'user'
},{
items:[{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy',
closable:true,
autoScroll:true
}],}],
},

joefox
23 Feb 2009, 5:35 AM
anyone?

joefox
23 Feb 2009, 7:13 AM
anyone? :)

23 Feb 2009, 7:27 AM
why are you setting a tab as collapsible? that makes no sense to me.


ALso, why create these huge object models when learning? Why not just abstract out the pieces and work on things one piece at a time?

23 Feb 2009, 7:39 AM
Paste this in firebug:



var childTabPanel = {
xtype : 'tabpanel',
activeTab : 0,
deferredRender : false,
title : 'Child tab',
columnWidth : .75,
height : 200,
items : [
{
title : 'Child tab 0',
html : 'Child tab 0'
},
{
title : 'Child tab 1',
html : 'Child tab 1'
}
]
}

var somePanel = {
xtype : "panel",
height : 200,
title : 'Some panel',
columnWidth : .25,
html : 'boo',
frame : true

}

var childTabPanelContainer = {
xtype : 'container',
height : '200',
title : 'childTabPanelContainer',
autoEl : {},
layout : 'column',
items : [
somePanel,
childTabPanel
]

}

var parentTabPanel = {
xtype : 'tabpanel',
activeTab : 0,
deferredRender : false,
items : [
{
title : 'Some arbitrary tab',
html : 'in here'
},
childTabPanelContainer
]


}

new Ext.Window({
layout : 'fit',
height : 500,
width : 500,
items : parentTabPanel
}).show();

joefox
23 Feb 2009, 9:57 AM
Well, i figured i would just add this one piece, and see if i can get it running.
I dont know hwo to intergrate it in.

I think maybe i was explaining it wrong, see the below picture.
To the right of .25 box that says 'user information' is another table, i wanted that to be the tabs area.

http://imagesticky.com/images/1j1ubyx8ii762b5gq7x.jpg


new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy',
closable:true,
autoScroll:true
},{
layout:'column',
title:'User Information',
iconCls:'user',
defaults:{
style:'padding:5px'
},
items: [{
title: 'User Profile',
iconCls:'user',
collapsible: true,
columnWidth: .25,
contentEl: 'user_information'
},{
xtype: 'tabpanel',
columnWidth: .75
},{
items: [{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy',
closable:true,
autoScroll:true
}],
}]
},{
layout: 'accordion',
title: 'Config Options',
iconCls:'settings',
defaults:{
collapsed:true
},
items:[{
contentEl: 'User_Search_Attribute',
title: 'User Search Attribute Option',
iconCls:'settings'
},{
title: 'Application User Policy',
contentEl: 'Application_Use_Policy',
iconCls:'settings'
}]
},

23 Feb 2009, 10:05 AM
add some tabs with some html and you'll see it appear. also, be sure to add a height to the tabpanel that is in the .75% column.

joefox
23 Feb 2009, 10:12 AM
I tried to add items to it, but i think my ending of items is wrong...

Thanks again for all your help.


,{
layout:'column',
title:'User Information',
iconCls:'user',
defaults:{
style:'padding:5px'
},
items: [{
title: 'User Profile',
iconCls:'user',
collapsible: true,
columnWidth: .25,
contentEl: 'user_information'
},{
xtype: 'tabpanel',
columnWidth: .75
},{
items: [{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy'
}],
}]},
{
layout: 'accordion',
title: 'Config Options',
iconCls:'settings',
defaults:{
collapsed:true
},
items:[{
contentEl: 'User_Search_Attribute',
title: 'User Search Attribute Option',
iconCls:'settings'
},{
title: 'Application User Policy',
contentEl: 'Application_Use_Policy',
iconCls:'settings'
}]

23 Feb 2009, 10:18 AM
Look at your tabpanel, you're not adding the items to the tabpanel :) in essence, your 'items' is a 3rd child of the column-layout panel.

23 Feb 2009, 10:20 AM
Add items to your tab panel, not as a 3rd child of the column layout.

I highly suggest buying my (currently in production) book Extjs in action:
http://manning.com/garcia
http://www.manning.com/garcia/garcia_cover150.jpg


I promise you, by the end of chapter 4, you'll totally understand what all this stuff is! :)

joefox
23 Feb 2009, 10:24 AM
thats where im lost, i dont know what im doing wrong when doing the tab panel lol....

wow cool, your book would help me tons...ill have to get it at next payday.


Add items to your tab panel, not as a 3rd child of the column layout.

I highly suggest buying my (currently in production) book Extjs in action:
http://manning.com/garcia
http://www.manning.com/garcia/garcia_cover150.jpg


I promise you, by the end of chapter 4, you'll totally understand what all this stuff is! :)

joefox
23 Feb 2009, 11:34 AM
I tried to add a new tab to the tabpanel but it still throws errors, i think the format i have it is wrong...

any ideas?


new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy',
closable:true,
autoScroll:true
},{
layout:'column',
title:'User Information',
iconCls:'user',
defaults:{
style:'padding:5px'
},
items: [{
title: 'User Profile',
iconCls:'user',
collapsible: true,
columnWidth: .25,
contentEl: 'user_information'
},{
xtype: 'tabpanel',
columnWidth: .75,
items:[{
contentEl:'disclamer',
title: 'Use Policy'
}],
}]},
{
layout: 'accordion',
title: 'Config Options',
iconCls:'settings',
defaults:{
collapsed:true,
},

joefox
23 Feb 2009, 12:08 PM
anyone?

tryanDLS
23 Feb 2009, 12:24 PM
Please stop bumping your threads every hour. If you really need expedited assistance you should consider a support contract.

You still do not grasp the concept of getting help. You make it very difficult for others to assist you if you continue to modify your code but don't post the fully updated code that somebody could look at. This thread is already 2 pages long and most people don't have the time or desire to start from the beginning and figure out all the iterations of what you tried and where things are now.

joefox
23 Feb 2009, 12:48 PM
The problem was simple as i thought, just needed a tab panel.

I showed my code, then i showed what i was trying...

I wanted to have a tab panel next to my .25 coulmn, i made one that was .75 that was right fit, however it was not a tab panel, now i was having trouble adding "tabs" to it.


{
layout:'column',
title:'User Information',
iconCls:'user',
defaults:{
style:'padding:5px'
},
items: [{
title: 'User Profile',
iconCls:'user',
collapsible: true,
columnWidth: .25,
contentEl: 'user_information'
},{
xtype: 'tabpanel',
columnWidth: .75,
items:[{
contentEl:'disclamer',
title: 'Use Policy'
}],
}]},

joefox
23 Feb 2009, 1:31 PM
Here is another look at what I'm doing, I can just cant figure out the nested tab panel.


items: [{
title: 'User Profile',
iconCls:'user',
collapsible: true,
columnWidth: .25,
contentEl: 'user_information'
},{
xtype: 'tabpanel',
columnWidth: .75,
items:[{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy'
},{
contentEl:'disclamer',
title: 'Use Policy 2',
iconCls:'usepolicy'
}],
}]