PDA

View Full Version : TabPanel with botom tabBar in a Carousel



kostik83
16 Jul 2010, 12:45 PM
How do we make sure that the bottom toolbar icon do not overlap with Carousel scroller?

evant
18 Jul 2010, 4:13 PM
It's not a problem, for example:



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

var c = 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 tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
iconCls: 'info',
layout: 'fit',
items: c
}]
});
}
});

kostik83
19 Jul 2010, 5:24 AM
I see, what i am trying to accomplish is to have a TabPanel as an item of the Carousel. Something like this:



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
ui: 'light',
animation: {
type: 'slide',
cover: true
},

items: [{
title: 'About',
iconCls: 'info',
layout: 'fit',
items: c
}]
});

var c = new Ext.Carousel({
fullscreen: true,
defaults: {
cls: 'card'
},
items: [
tabpanel
, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});
}
});

kostik83
20 Jul 2010, 6:09 AM
My comment is still moderated? hmmm

evant, try to put a tabpanel as an item of the carousel.