PDA

View Full Version : carousel in a tabpanel



epalm
5 Jul 2010, 8:01 AM
Ext.setup({

icon: 'icon.png',
glossOnIcon: false,

onReady: function() {

new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: { pack: 'center' }
},
animation: 'fade',
items: [{
title: 'Search',
iconCls: 'search',
cls: 'card card1',
items: {
xtype: 'carousel',
items: [{
html: 'Card #1',
cls: 'card card1',
},{
html: 'Card #2',
cls: 'card card2'
},{
html: 'Card #3',
cls: 'card card3'
}]
}
},{
title: 'Other',
html: '<p>Something else could go here...</p>',
iconCls: 'info',
cls: 'card card2'
}]
});
}
});


TabPanel and Carousel work on their own, but if I put a Carousel inside a TabPanel, the Carousel doesn't budge.

Any suggestions?

epalm
5 Jul 2010, 8:04 AM
Also, I keep seeing
cls: 'card cardN' in the examples. Are they necessary?

TommyMaintz
6 Jul 2010, 12:51 PM
Those classes are just to give the cards different colors.

The reason the Carousel doesnt work is because you are overnesting. If you want to add a carousel as an item of a Tabpanel, you can just add it to the TabPanels items array. The following will work:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {pack: 'center'}
},
animation: 'fade',
items: [{
title: 'Search',
iconCls: 'search',
xtype: 'carousel',
items: [{
html: 'Card #1',
cls: 'card card1',
},{
html: 'Card #2',
cls: 'card card2'
},{
html: 'Card #3',
cls: 'card card3'
}]
}, {
title: 'Other',
html: '<p>Something else could go here...</p>',
iconCls: 'info',
cls: 'card card2'
}]
});
}
});


If you want to wrap a panel around it, you would have to specify a layout of 'fit' on that wrapping panel to have the carousel take up all the available space.

epalm
6 Jul 2010, 12:53 PM
Got it. Much thanks. :)