View Full Version : difficulties with the carousel ext.

29 Apr 2009, 5:46 AM

I just discovered the carousel extension http://extjs.com/playpen/ext-core-latest/examples/carousel/ (http://extjs.com/forum/../playpen/ext-core-latest/examples/carousel/) and tried to integrate it into my website. Unfortunately I was only partly successful.

I am already using ext 2.2. I additionally included the ext-core-debug.js of 3.0 and carousel.js, but it told me ext.ux.carousel is not a constructor.

Then I tried to use it only with the ext-all.js of 2.2 and the carousel.js and deleted the 3.0 core stuff.

It partly works.

autoPlay works, but there is no navigation bar dropping down of the header.

new Ext.ux.Carousel('simple-example', {
itemSelector: 'img',
interval: 3,
autoPlay: true,
showPlayButton: true,
pauseOnNavigate: true,
freezeOnHover: true,
transitionType: 'easeIn',
navigationOnHover: true
Is it a javascript problem or is it a css problem? I mean, should I use 3.0 and 2.2 together btw would it make sense to do that anyway?

Another thing i discovered is, the images get listed below each other like this:
<img> <img> <img>

At my site, the javascript comes, lets say, a second delayed after the html. So the user can see the images ordered below each other at first and then javascript comes, puts the images into the gallery box and the whole look of the page gets altered.

How would u solve it? set all images to display none and switch it to block, after the gallery is rendered?

thx for help in advance


29 Apr 2009, 5:49 AM
3.0 and 2.2? What?

There can only be one Ext namespace.

do you have a public example?

Ext 3.0 Core is not Ext JS 3.0!

29 Apr 2009, 5:59 AM

do you include the carousel.css file?

29 Apr 2009, 6:09 AM
There is only ext-base.js at the moment, no 3.0 core.

the carousel.css is copied in my local stylesheet.

it works, but there is no navigation bar on top. the slideshow works

29 Apr 2009, 9:39 AM
OK, what would you expect? it was built using Ext3-core.

i don't understand why this is an issue?

29 Apr 2009, 11:53 AM

Respectfully, I have this same issue.

Basically, I would like to use the Ext Core 3 beta carousel on an exsting ExtJS2.2 page.
Specifically, within a Ext.TabPanel and Ext.Viewport Borderlayout.

Unfortunately, what it sounds like is that this is not possible because:
1. Core 3 beta - because not all widgets are included in Core. Or, in...
2. ExtJS2.2.1 - because the carousel was built on core3.

Is there a best-case solution for either...
A. backward-compatability?
B. forward-compatability?


29 Apr 2009, 2:10 PM
You seem to be missing the point of what Ext Core is.

It's not an add-on that you can mix-match with 2.x code. It's a subset of the full Ext 3.0 API, that's not intended to have any widgets. Almost all the code in Ext Core exists in Ext 2.x, although refactored somewhat to be standalone and have a smaller footprint.

Carousel is just a little demo of using some of core functionality - it's not intended to be a fullblown widget. I highly doubt that it's going to be backported to 2.x by Ext staff.

The upgrade path from 2.x is not Ext Core, it's Ext 3.0. Ext Core is intended for use on a site where you don't need the weight of the entire Ext 3.0 package.

29 Apr 2009, 8:39 PM
OK just checked and it doesn't work because Ext 2.2 doesn't have the events 'mouseenter' and 'mouseleaves'. This is to get the underlaying components of the container including the navigation panel. If you change them to the 'mouseover' and 'mouseout' (the ones that Ext 2.2 has) then you cant click the panel because when the mouse go to the navigation the container receives the 'mouseout' event and the navigation panel hides.

This only happens if you put freezeOnHover or navigationOnHover to true. Guess you can use it with the always show the navigation panel and without freezing the animation on enter. As in the other examples. (people can always click on stop and go one by one as they like and click play again to start playing).

29 Apr 2009, 10:55 PM
It's a subset of the full Ext 3.0 API, that's not intended to have any widgets.

That means, that if I wait for the Ext JS 3.0 final release, I will be able to use everything that I used of 2.2 and additionally the 3.0 core, because 3.0 core is already part of Ext JS 3.0?!

30 Apr 2009, 2:49 AM

30 Apr 2009, 9:03 AM
Thanks, as well. This is helpful information.

Fantastic work, as always.