PDA

View Full Version : Cannot add Carousel to View



lucasite
5 Aug 2012, 5:44 AM
Hi all,
So I have custom carousel view and it works fine if I add it to my viewport. However if I add it inside another view, it doesnt work. Does this mean I cant load a carousel inside of another container?

My carousel view:


Ext.define("TestApp.view.CarouselTest", {
extend: "Ext.Carousel",
alias: "widget.carouseltest",
requires: [
'Ext.carousel.Carousel',
'Ext.Img'
],
initialize: function () {
this.callParent(arguments);

var items = [{
html: 'Item 1',
style: 'background-color: #5E99CC'
},
{
html: 'Item 2',
style: 'background-color: #759E60'
},
{
html: 'Item 3'
}];

this.add(items);


}
});

Here's my homepage view:


Ext.define("TestApp.view.HomepageView", {
extend: "Ext.Container",
alias: "widget.homepageview",


initialize: function () {
console.log("homepage init");
this.callParent(arguments);

var backButton = {
xtype: "button",
ui: "back",
text: "Home"
};


var topToolbar = {
xtype: "toolbar",
title: 'Rank',
docked: "top",
items: [backButton]
};


var ct = { xtype: "carouseltest" };


this.add([ct]);


}
});

And here's my app:


Ext.application({
name: "TestApp",


controllers: ["TestAppController"],
views: ["HomepageView", "CarouselTest"],


launch: function () {
console.log("app launch");


var hpView = { xtype: "homepageview" };

Ext.Viewport.add([hpView]);


}
});


The homepage loads, with the top toolbar, but the carousel doesnt appear.

Can anyone spot a problem with this?

Luca

sword-it
5 Aug 2012, 10:46 PM
try this code, it is working fine for me:-



var cont = new Ext.Container({
width: '100%',
height: '100%',
layout:{
type: 'vbox',
align: 'stretch'
},
items:[{
xtype: 'carousel',
defaults: {
layout: 'hbox'
},
flex: 1,
items:[{
html: '1'
},{
html: '2'
}]
},{
flex: 1,
html: 'Second'
},{
flex: 1,
html: 'Third'
}]
});