Sencha Touch Carousel randomisation

I currently have a static carousel set up as below:

  varPanelTop = new Ext.Carousel({
        defaults: {
            cls: 'homeTo开发者_JS百科p'
        },
        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

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.