PDA

View Full Version : Carousel example inside a Tabpanel.



kathir
25 Jan 2011, 5:58 PM
I tried placing the carousel example from the api docs into a tab panel as below. But it does not work. Its just empty on the Second tab.


var carousel = new Ext.Carousel({
items: [ {
html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
cls : 'card card1'
},{
html: '<p>Clicking on either side of the indicators below</p>',
cls : 'card card2'
},{
html: 'Card #3',
cls : 'card card3'
}
]
});



var panel = new Ext.Panel({
cls: 'cards',
layout: {
type : 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [
carousel,
{
xtype : 'carousel',
ui : 'light',
direction: 'vertical',

items: [
{
html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>',
cls : 'card card1'
},
{
html: 'Card #2',
cls : 'card card2'
},
{
html: 'Card #3',
cls : 'card card3'
}
]
}
]
});


var dockedItems = [{
xtype: 'toolbar',
dock: 'top',
title: 'Touch',
items: btnSpecTop,
defaults: { handler: tapHandler }
},
{
xtype: 'tabpanel',
layout: 'card',
dock: 'top',
fullscreen: true,
items:[{
title: 'Explore',
dockedItems: nestedList
},{
title:'Explore2',
dockedItems:panel
},{
title: 'Explore3',
html: '<p>Explore</p>'
}]
}
]

var appPanel = new Ext.Panel({
id: 'appPanel',
fullscreen: true,
dockedItems: dockedItems
});

kathir
25 Jan 2011, 6:07 PM
ah.. you have to do it with layout:'fit' otherwise it would not show up.

Solved !.