Sencha touch image Carousel

Proseguiamo con lo studio di Sencha touch con il componente Carousel.

Questo componente permette di mettere in un componente padre un tot di elementi da scrorrere con il dito.

Una spece di slider insomma.

Noi useremo questo componente per creare una galleria di immagini.

Il primo pezzo consiste nello scandagliare la nostra directory e salvare tutto in un array:

       // IMAGES
        var imgsAdv = [];
        for (var j = 1; j < 19; j++) {
            imgsAdv.push({
                xtype: 'image',
                src: 'directory/' + j + '.png'
            });
        }

Come vedete nell'array salviamo diversi componenti di tipo image.

A questo punto molto semplicemente impostiamo l'arrary come items del Carousel:

       // CAROUSEL
        var carAdvertising = new Ext.Carousel({
            fullscreen: true,
            title: 'Advertising',
            items: imgsAdv
        });

L'unica pecca di questo metodo è nel ciclo for.

Come vedete c'è un 19 e l'ho messo a mano.

Questo vuol dire che devo sapere a priori quante immagini ci sono nella directory.

Ci sono ovviamente tanti altri modi.

Uno è quello di usare un file PHP e salvare tutto in formato JSON, e poi usare uno Store.

Solo ho un pò di problemi ancora a seguire quella strada e quindi per ora mi accontento di fare così.