sencha touch - custom html template ported from another framework

Question

Previous attempt at this app was done in jqtouch and this effect worked perfectly. Im having a really hard time wrapping my head on how best to do this with sencha touch.

My situation is best described in this image This is just one item that should populate a carousel so reusing it with different data is paramount (no hard coded html).

thank you

Answer 1

Finally solved it thought I should update it here

Ext.define('mobuy.view.myCarousel', {
    extend: 'Ext.carousel.Carousel',
    alias: 'widget.myCarousel',
    config: {
        myitems: 0,
    },

    updateMyItems: function(newItem) {

        var localCarouselItems = [];

        Ext.each(newItems, function(item){
            localCarouselItems.push({
                xtype:'localItem',
                data:item.data
            });
        });

        this.setItems(localCarouselItems);
        this.setActiveItem(0);
    }
})

what this does is basically create an array of new items of type localItem from the store when one calls setMyItems and sets the data (to be used with xtemplate or whatever) for each of those items.

If anybody needs more details please ask and I'll update my answer.