Sencha Touch Carousel randomisation

Question

I currently have a static carousel set up as below:

  varPanelTop = new Ext.Carousel({
        defaults: {
            cls: 'homeTop'
        },
        items: [{
            html: '<img src="IMAGE ONE" />'
        },
        {
            html: '<img src="IMAGE TWO" />'
        },
        {
            html: '<img src="IMAGE THREE" />'
        },
        {
            html: '<img src="IMAGE FOUR" />'
}]
  });

Not a problem all works fine, but now i have been thrown a big one, in which 'can i do this so that each time this page is refreshed the order of the html/imgs are different each time?

So would this be possible to do and how if so?

Many Thanks

ilija139 ilija139 · Accepted Answer · 2011-09-23T13:41:23

It's possible. Have an array with objects like this:

var images = [{html:'<img src="i1.jpg" />'},{html:'<img src="i2.jpg" />'},{html:'<img src="i3.jpg" />'},{html:'<img src="i4.jpg" />'}];

Then depending when you show the carousel you will have:

Ext.getCmp('carouselId').items.add(images[Math.floor(Math.random()*images.length)]);

etc. you can check if the images were added already i.e. all you need is a list of random numbers and you add the images to the carousel like that. Afterwards you call

Ext.getCmp('carouselId').doLayout();

to display the images.

Note that carouselId is the "id" property of the carousel object, but there are better ways to get to the carousel object. It all depends where you have it.

Sencha Touch Carousel randomisation

1 Answers