Is it possible to use different components as parts of a NestedList?

[irene]

Hi,

I'm trying to make a "drill down" navigation app, but I want to be able to show different components in every page. for example a carousel, and then below that, 3 or 4 options that will lead to different pages (just like the NestedList example works right now). Is that possible? I tried to put something like:


onReady: function() {

var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
}, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});


var nestedList = new Ext.NestedList({
fullscreen: true,
items: [carousel1, {
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
}]
}]
});but the result is not rendering properly and the carousel does not behave as expected.
Any help/ideas/suggestions?

Thanks in advance,
Irene

[TommyMaintz]

Thanks for the suggestion. The NestedList component is not as flexible yet as it should be. We have some major improvements planned for it. The way you can work around it for now is by wrapping the NestedList in another panel with a card layout. Then you can switch between the NestedList and your Carousel by using the setCard method on the outer panel. Check the Kitchensink source code in which we do something very similar.