PDA

View Full Version : Ext.NestedList within a Ext.TabPanel



caseybecking
28 Jul 2010, 10:11 AM
Any one have some idea of how i could add a nested list within a tab on only one tab?

28 Jul 2010, 10:14 AM
have you tried setting it up a child item?

caseybecking
28 Jul 2010, 10:30 AM
I'm not sure how to do that.

28 Jul 2010, 10:42 AM
set it as a child item. (include it in the items array of the tab panel)

caseybecking
28 Jul 2010, 10:52 AM
do you mind posting a code example im very new at this.

28 Jul 2010, 10:57 AM
The examples show how to setup a container (tabpanel) with a child item.



// the rest of the tab panel configs here
items : [
{
xtype : 'list',
title : " your nested list"
// the rest of the list configs
}

]

28 Jul 2010, 10:57 AM
By the way, why use a tab panel if you have only one tab?

caseybecking
28 Jul 2010, 11:12 AM
I have 8 tabs and i want the last one to use the nested list

caseybecking
28 Jul 2010, 11:28 AM
heres my code. All the tabs work fine but when i get to the last tab the list doesnt seem to work?


Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {

var tab = new Ext.TabPanel({
fullscreen: true,
type: 'light',
sortable: true,
items: [{
title: 'Home',
cls: 'home',
styleHtmlContent: true,
contentEl: 'home_1',
scroll: 'vertical'
}, {
title: 'Photos',
styleHtmlContent: true,
contentEl: 'photos_1',
scroll: 'vertical',
cls: 'photos'
}, {
title: 'Montauk',
styleHtmlContent: true,
contentEl: 'montauk_1',
scroll: 'vertical',
cls: 'montauk'
}, {
title: 'Behind the Scenes',
html: '4',
cls: 'card4'
}, {
title: 'Designer',
html: '5',
cls: 'card5'
}, {
title: 'Lineguide',
html: '6',
cls: 'card6'
}, {
xtype : 'list',
id: 'help',
cls: 'card7',
title : "Help",
items: [{
text: 'Option A',
items: [{
text: 'Option A.1',
customAttribute: 123,
items: [{
text: 'Option A.1.a'
},{
text: 'Option A.1.b'
}]
},{
text: 'Option A.2',
customAttribute: 389
}]
},{
text: 'Option B',
items: [{
text: 'Option B.1',
customAttribute: 233
},{
text: 'Option B.2',
customAttribute: 2390
}]
},{
text: 'Option C',
items: [{
text: 'Option C.1',
customAttribute: 903
},{
text: 'Option C.2',
customAttribute: 77
}]
}]

}

]

})
}
});