View Full Version : Infinite Carousel with Sencha Touch 1.0

24 Jan 2011, 1:32 AM
Hi all, looking at the infinite carousel demo explained here: http://www.sencha.com/blog/2010/08/10/infinite-ajax-carousel-shopstyle-demo-app/

I'm having a lot of issues trying to adapt this as I'm using Sencha Touch 1.0 and the demo was built for 0.9.3.

Does anyone know of a good example of the infinite carousel for the current version?

Many thanks

24 Jan 2011, 2:12 AM
Hi Frances.
Take a look at this good demo posted by michellsimoens.


Hope this helps.

24 Jan 2011, 2:55 AM
Thank you Andrea, I'll check it out.


24 Jan 2011, 8:20 AM
That is kind of out dated as well. Not many people said much about it so I kind of let it go. It's on GitHub if you want to toy around with it. https://github.com/mitchellsimoens/Sencha-Touch-Infinite-Carousel

Basically all it does is removes a container and adds it to the end/start.

25 Jan 2011, 12:38 AM
Thanks for that Mitchell, it was easier to get your demo working with the latest version.


23 Mar 2011, 5:13 AM
Hi Frances, did you get Infinite Carousel working for Sencha 1.0a?

any chance you can post your code as I can't get mitchells demo to work with libraries above 0.93

23 Mar 2011, 6:03 AM
I have just did a quick update to make things work. I have tested against Sencha Touch 1.1.0. I want to do a total rewrite of this, when I have time.


23 Mar 2011, 6:31 AM
Thanks Mitchell for your VERY speedy response!

The bit I'm struggling with is the results.php, I get error
Ext.data.JsonReader.getResponseData: Unable to parse JSON returned by Server.

Any ideas?
(My ultimate aim is to have an infinite carousel of 1024x768 images)

23 Mar 2011, 6:56 AM
Hi Mitchell,

Thank you so much for that update!! Very kind.

I spent all day yesterday trying to understand what didn't work with all the other infinite carousels (including your previous version)...

..and as I only this week started the transition from flashcoding to javascript...I'm in total pain! ;)

I look forward to any future updates!

In short, what would you say need a rewrite with the current version, any serious stuff?

EDIT: I presume the problem with too quick swipes making it stop adding pages...? Seems this is a problem with all the infinite carousels I've seen so far...fixable or a sencha / device problem?

Many thanks,

25 Mar 2011, 3:06 PM
Hi Mitchell.

First of all, thanks for your Infinite Carousel.
I've tested your latest code and it works.

I've been trying to make it work while using a Memory Proxy and providing its data in its declaration (instead of using an Ajax Proxy and a url) and for some reason, the 'datachanged' event doesn't seem to be captured by the code in the infinite carousel.js, so the carusel will just initComp but it won't create cards because this 'datachanged' isn't being captured, thus onDataChanged is not being called.

However, if i define a set of listeners in the store declaration itself, they fire just fine.

Do you have any idea why this might be happening?.

carousel = new Ext.ux.touch.InfiniteCarousel({
fullscreen : true,
defaults : {
cls : "demo-card"
store : new Ext.data.Store({

model: 'Pages',
autoLoad: true,
// 'items' is an array of objects made out of a previous JSONP call
data: items,
proxy: {
type: 'memory',
reader: {
type: 'json'
listeners: {

// This event fires just fine
datachanged: function(o, reg, status) {





25 Mar 2011, 5:16 PM
Well, I made a call to the onDataChange function itsel after applying the cfg object to the superclass's initComponent.
It seems that providing the data as part of the config of an store with a memory proxy, makes that data immediately available to the store so there's no real need to wait for that event anyways (which makes total sense and I hope I'm right).
Content loads just fine now, I've been able to create custom cmp objects to insert into the carusel.

But, now I have another problem:

If a "cmp" html property has an image, the dragging between cards starts acting weird, i went back to test this behavior on your original files (replacing the content generated by the php file and adding only "cmp"'s to the array of results) and the same thing happens, however, if I set a CSS style to the images so they don't take up the full size of a card, I'm able to start the dragging on a blank area of the card and when you do that, everything works ok.

So the problem appears when starting the dragging over an image element.

I've tried setting the -webkit-user-select: none; property on the images with no luck.
Any ideas why does this happen?

28 Mar 2011, 5:16 AM
I just pushed an update to Github. If a Store already has data, it will create the cards. When I saw this post on Friday I knew exactly how to fix it but I went to the beach all weekend :D

About the image, I have tested on a large (1200 x 1600) image and it works fine on the iPad 2. The cards will still scroll back and forth just fine, the image will render across multiple cards due to it's size. I tested on Chrome and the browser thinks you are dragging the image so what you are saying it seems you are trying in a browser. It's just the way the browser is handling it. Test on a mobile device and it scrolls fine. You will need to use CSS to fix this issue, maybe width: 90% or something like that.

28 Mar 2011, 6:49 AM
I hope you had fun :)

Thanks for the update, much better to check with getCount.

About the image you are right, that day I only had time to test it on Chrome.
I remember I had this problem once before but it was because of a typo in the link to the sench-touch.css file on my html file. I wonder if something in the CSS of this new version of Sencha Touch is causing this.

Anyways, thanks again for the reply!

24 May 2011, 11:10 AM
Hello, i have a question. This infinite carousel only render as a fullscreen: true?
I fail to make it render into a panel.
I can put two carousel on the same panel?
This should pop up when I click in a thumbnail, and show an image gallery.
The last part is ready (the image gallery) but I cant render the carousel into a float panel.

17 Oct 2011, 11:51 AM
Hi Frances.
Take a look at this good demo posted by michellsimoens.


Hope this helps.

Wow!!! this is excellent!

29 Nov 2011, 3:31 PM
I have had a lot of success with this using images, but for some reason I cannot get the contentEl property to work. I want to render some elements already on the page, but once they leave the screen, I get Uncaught TypeError: Cannot call method 'show' of null

It's like the store is losing binding or something. They work for first render, but then get that error when being swapped or shifted.

var store = new Ext.data.Store({
model : 'Pages',
loadStaticData: function() {
var data = [
{ cmp : '{ "xtype" : "panel", "contentEl" : "c1", "cls" : "page" }' },
{ cmp : '{ "xtype" : "panel", "contentEl" : "c2", "cls" : "page" }' },
{ cmp : '{ "xtype" : "panel", "contentEl" : "c3", "cls" : "page" }' },
{ cmp : '{ "xtype" : "panel", "contentEl" : "c4", "cls" : "page" }' },



<div >
<div id="c1">
<p>Phasellus mattis elementum sapien, eu dictum diam malesuada in. Integer consequat consectetur </p>
<div id="c2">
<p> Integer consequat consectetur </p>
<div id="c3">
<p> sapien, eu dictum diam malesuada in. </p>
<div id="c4">
<p> consectetur </p>

20 Jan 2012, 1:19 AM
The speed is awesome!! But I have a little glitch. I have made a custom component/Panel and I load that into the store, instead of a panel. But, while I navigate through the elements of the carousel, sometimes the rendering of the custom panel fails and shows nothing.. I will test it on the iPad to see if it is a browser problem..
Any help would be appreciated.

[UPDATE]. I noticed that the rendering breaks on every third page. Two pages work great and the third one breaks.

[UPDATE 2 - SOLUTION!] If anyone is having the same problem, the solution is simple (as always). I was creating the bug, by giving explicit ids to some elements inside the custom panel. As a result, when the 'remove' method was called, to remove the first item of the carousel, javascript removed all the components with the specific id. So it removed the current item's components as well. So, DON'T give ids to items that will be repeated in a carousel. :)