PDA

View Full Version : Need a little help with TabPanel



craigbett
12 Nov 2010, 4:53 AM
I new to JS in general, I some what know the syntax but thats about it. I need some help with the Ext.TabPanel. What I'm trying to do is have a Carousel as one of the Tab Panels. I know how to do this, but not the way I want to do it. I'm trying to separate each Tab Panel into a different js document.
example:

index.js

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Home',
iconCls: 'home',
cls: 'card1',
New homeCarousel(),
}, {
title: 'Foo',
iconCls: 'FOO'
cls: 'card2',
}, {
title: 'Foo1',
iconCls: 'Foo1'
cls: 'card3',
}]
});

home.js

homeCarousel = 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'
}]
});


I know this isn't the right way to do this, if someone could help me or point me in the right direction it would be GREATLY appreciated

Steffen Hiller
12 Nov 2010, 6:10 AM
I think you almost got it. Check the code in red:



homeCarousel = 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', // This item is an item/card of the Carousel, not the TabPanel
html: '2'
},
{
// title: 'Tab 3', // This item is an item/card of the Carousel, not the TabPanel
html: '3'
}]
});

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Home',
iconCls: 'home',
cls: 'card1',
items: new homeCarousel(),
}, {
title: 'Foo',
iconCls: 'FOO'
cls: 'card2',
}, {
title: 'Foo1',
iconCls: 'Foo1'
cls: 'card3',
}]
});


Let me know if that gives you the desired result.

craigbett
12 Nov 2010, 2:18 PM
The code you posted doesn't seem to work, This is what I'm running.

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

homeCarousel = 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', // This item is an item/card of the Carousel, not the TabPanel
html: '2'
},
{
// title: 'Tab 3', // This item is an item/card of the Carousel, not the TabPanel
html: '3'
}]
});

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Home',
iconCls: 'home',
cls: 'card1',
items: new homeCarousel(),
}, {
title: 'Foo',
iconCls: 'FOO',
cls: 'card2',
}, {
title: 'Foo1',
iconCls: 'Foo1',
cls: 'card3',
}]
});

}
});

I get this error when it come to the " items: new homeCarousel()," it says "Uncaught TypeError: Object is not a function" I have no idea how to fix this. One again, thank you for the help :)

Steffen Hiller
12 Nov 2010, 2:46 PM
Oh yeah, change



items: new homeCarousel(),


to



items: homeCarousel,


We're already instantiating the Carousel at the top. (new Constructor())

craigbett
13 Nov 2010, 7:46 AM
That didn't seem to work also, but I was looking at the sencha touch example and I found something that did.


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

// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
title: 'Tab 1',
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 Panel = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'fit'
},
defaults: {
flex: 1
},
items: [carousel1]
});

new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
flex: 1,
},
items: [{
title: 'Home',
iconCls: 'home',
cls: 'card1',
items: Panel,
}, {
title: 'Foo',
iconCls: 'FOO',
cls: 'card2',
html: 'card2',
}, {
title: 'Foo1',
iconCls: 'Foo1',
cls: 'card3',
html: 'card3',
}]
});

}
});

I had to create a panel for the Carousel to go in, then added the panel to one of the tabs. :)