PDA

View Full Version : Carousel & TabPanel



mal2000b
9 Aug 2010, 11:49 PM
How Can i attach a Carousel-Page as HTML to TabPanel ?!
Please Help me
this is my Code:


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

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



var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
html: 'CarouselNavigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.
'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});
/*new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1]
}); */





var tabpanel = new Ext.TabPanel({
fullscreen: true,
ui:'dark',
// type: 'light',
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
disabled:true,
layout: {
pack: 'center'
}
},

animation: {
type: 'cube',
cover: true
},
defaults: {
scroll: 'horizontal',
},
items: [{
title: 'About',
html: carousel1,
iconCls: 'info',
cls: 'card card1'
},
{
title: 'Favorites',
html: 'Favorites Card',
iconCls: 'favorites',
cls: 'card card2',
badgeText: '4'
},
{
title: 'Downloads',
id: 'tab3',
html: 'Downloads Card',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card card3',
iconCls: 'download'
},
{
title: 'Settings',
html: 'Settings Card',
cls: 'card card4',
iconCls: 'settings'
},
{
title: 'User',
html: 'User Card',
cls: 'card card5',
iconCls: 'user'
},
{
title: 'bookmarks',
html: 'bookmarks',
iconCls: 'bookmarks'
}


]


});

}

});

evant
10 Aug 2010, 12:20 AM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
title: 'Tab1',
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 carousel2 = new Ext.Carousel({
title: 'Tab2',
direction: 'vertical',
ui: 'light',
activeItem: 1,
defaults: {
cls: 'card'
},
items: [{
title: 'Tab 1',
html: '<h1>ui="light"</h1>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

new Ext.TabPanel({
fullscreen: true,
items: [carousel1, carousel2]
});
}
});

mal2000b
10 Aug 2010, 11:14 PM
thanks evant ...