PDA

View Full Version : Ext.Carousel not showing up


Uncaught
15 Sep 2010, 7:42 AM
Hi!

I have a problem with the Carousel control I couldn't solve. I have a class extended from a Panel in wich I want to show a simple carousel like this:


var cardItems = [];

this.basicCard = new Ext.Component({
scroll: 'vertical',
html: 'Hello Carousel 1!'
});

this.basicCard2 = new Ext.Component({
scroll: 'vertical',
html: 'Hello Carousel 2!'
});

cardItems.push(this.basicCard);

cardItems.push(this.basicCard2);

this.carousel = new Ext.Carousel({
items: cardItems
});

this.items = [this.carousel];
Unfortunately, the carousel doesn't show up and the whole panel stays empty. With the Chrome Developer Tools, I can see the tags generated by the carousel, but it isn't visible. When I change the Carousel to being a Panel, everything works just fine and both messages are shown. The carousels in the demo apps also work, so it's not my browsers fault.
Do you know what I'm doing wrong?
elishnevsky
15 Sep 2010, 11:31 AM
Maybe you're missing fullscreen:true ?
Uncaught
15 Sep 2010, 12:04 PM
When I use

this.carousel = new Ext.Panel({
instead of

this.carousel = new Ext.Carousel({
everything works fine and both messages are shown, so I don't think there is a mistake in the other parts of the code. When I instantiate the extended Panel, I use "fullscreen: true".
dbottillo
16 Sep 2010, 2:58 AM
i have exactly the same problem (beginning with sencha 0.95)

maybe a bug?
bgambs
19 Sep 2010, 2:52 PM
Agreed. Shifting from .93 to .95 causes previously working carousel to stop working.
evant
19 Sep 2010, 7:12 PM
It's difficult to say without seeing a working example. Can someone post a simple test case that demonstrates the issue?
Uncaught
19 Sep 2010, 11:31 PM
carousel.htm:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext-touch.css" type="text/css" />
<script type="text/javascript" src="ext-touch.js"> </script>
<script type="text/javascript" src="carousel.js"> </script>
<title>Carousel</title>
</head>
<body>

</body>
</html>

carousel.js:

Ext.setup({
onReady: function () {
var cardItems = [];

basicCard = new Ext.Component({
html: 'Hello Carousel 1!'
});

basicCard2 = new Ext.Component({
html: 'Hello Carousel 2!'
});

cardItems.push(basicCard);

cardItems.push(basicCard2);

carousel = new Ext.Carousel({
items: cardItems
});

var pnl = new Ext.Panel({
fullscreen: true,
items: [carousel]
});
}
});

If you make carousel an Ext.Panel, both messages are shown, but as Ext.Carousel, nothing is shown.
evant
19 Sep 2010, 11:40 PM
Over-nesting. Why put the carousel in a full screen panel? Just make the carousel be full screen.
Uncaught
20 Sep 2010, 4:49 AM
Thank you, that solved my problem! The Carousel works fine now. But I don't really know why, because the official example (http://dev.sencha.com/deploy/touch/examples/kitchensink/) is also using a nested Carousel.
evant
20 Sep 2010, 4:50 AM
The official example puts it in a container with an appropriate layout.