PDA

View Full Version : Can't get Carousel component to work



FranciscoAlexis
15 Aug 2011, 3:51 PM
Hi ,

i'm just making a very simple app with the following script:

var app;



var app;


app = new Ext.Application({
name: 'app',
launch: function() {
var appPanel;

var appContent = new Ext.Carousel({
dock: 'top',
items: [
{
title: 'title 1',
html: 'html content 1',
style: 'background-color: #FF0000;'
},
{
title: 'title 2',
html: 'html content 2',
style: 'background-color: #00FF00;'
},
{
title: 'title 3',
html: 'html content 3',
style: 'background-color: #0000FF;'
}
]
});

var appHeader = new Ext.Toolbar({
dock : 'top',
title: 'Hidden City'
});


var appFooter = new Ext.Toolbar({
dock : 'bottom',
ui : 'light',
title: 'FeedBack'
});

this. viewport = appPanel = new Ext.Panel({
fullscreen: true,
defaults: {Flex: 1},
layout: {
type: 'vbox',
align: 'stretch'
},
dockedItems: [appHeader,appContent,appFooter],
/*html: 'Content'*/
});
}
});


for some reason the carousel component doesn't show at all.

Any suggestions?

Best, Francisco.

bharatn
15 Aug 2011, 10:18 PM
JS is case sensitive


defaults: {flex: 1}


Use items property


items: [appHeader,appContent,appFooter]

jjerome
16 Aug 2011, 4:37 AM
Use items property


items: [appHeader,appContent,appFooter]


Because you set the carousel to docked, it may not show up correctly (don't count me on that) so dock your appHeader and appFooter but place your appContent in the 'items: [...],' config.

Also, I've never seen this before and I'm curious:



this. viewport = appPanel = new Ext.Panel({
...

I don't understand why you do that, Francisco.

FranciscoAlexis
16 Aug 2011, 8:19 AM
I just figured out how to fix it:

in the code i just have to change the layout property:


this. viewport = appPanel = new Ext.Panel({
fullscreen: true,
defaults: {Flex: 1},
layout: 'fit',
dockedItems: [appHeader,appFooter],
items: [appContent]
/*html: 'Content'*/
});



And that get me the result that i was hoping for.

Thanks for all the replies!

FranciscoAlexis
16 Aug 2011, 8:21 AM
Because you set the carousel to docked, it may not show up correctly (don't count me on that) so dock your appHeader and appFooter but place your appContent in the 'items: [...],' config.

Also, I've never seen this before and I'm curious:



this. viewport = appPanel = new Ext.Panel({
...

I don't understand why you do that, Francisco.

That line is for asign a global variable called appPanel.

jjerome
16 Aug 2011, 8:39 AM
That line is for asign a global variable called appPanel.

Oh wow that makes more sense now :)