Sencha Touch Carousel From JSON Store

Question

I'm building a Wordpress site using Sencha Touch. I've created a plugin that converts the posts to JSON for the application to read.

In the Applications "Post View" I am loading post information (Title, Body, etc) and I would like to have a carousel that displays all the images within the array "images" I've put through the json within the post.

My application is using the MVC structure (because I like the feeling of my teeth being pulled) and so I need a list of posts to pass the data through onto the Single Posts panel, then get the Images array into the carousel.

The goal is to select a post from the list, load the data into the postsingleview (currently working) and then load the images from that post into the carousel.

Any and all suggestions much appreciated.

Here's what I have so far:

JSON: http://pastie.org/2497239 (Stack's codewrapper wouldn't let me display json, here's the pastebin)

PostListView:

App.views.PostListView = Ext.extend(Ext.Panel, {

    postStore: Ext.emptyFn,
    postList: Ext.emptyFn,
    id:'postlistview',
    layout: 'card',

    initComponent: function () {

        this.postList = new Ext.List({
            store: App.stores.postStore,
            grouped: true,
            emptyText: '<div style="margin:5px;">No notes cached.</div>',
            onItemDisclosure: true,
            indexBar: true,
            itemTpl: '<div class="list-item-title">{title}</div>',

        });

        this.postList.on('disclose', function (record) {
            this.onViewPost(record);
        }, this),

        this.items = [this.postList];

        App.views.PostListView.superclass.initComponent.call(this);
    },

    onViewPost: function (record) {

        Ext.dispatch({
            controller: App.controllers.masterController,
            action: 'viewpost',
            record: record,
        });
    },

});

Master Controller with "ViewPost" action:

    'viewpost': function (options) {

        App.views.postSingleView.bodycard.update(options.record.data);
        App.views.postSingleView.funfactcard.update(options.record.data);
        App.views.postSingleView.crosscard.update(options.record.data);
        App.views.postSingleView.historycard.update(options.record.data);
        App.views.postSingleView.architectcard.update(options.record.data);
        App.views.postSingleView.commentcard.update(options.record.data);
        App.views.postSingleView.dealscard.update(options.record.data);

        App.views.postView.setActiveItem(
            App.views.postSingleView,
            { type: 'slide', direction: 'left' }
        );
    },

Post Single View (Which displays the data from the post)

App.views.PostSingleView = Ext.extend(Ext.Panel, { 

    title:'Single Post',
    id:'postsingleview',
    layout:{
        type:'vbox',
        align:'stretch',
        pack:'end'
    },
    defaults: { flex: 1 },

    initComponent: function () {

        this.bodycard = new Ext.Component({
            title:'Info',
            scroll:'vertical',
            cls : 'card bottomcard card3',
            iconCls:'info',
            tpl: '<tpl for=".">' + 
                    '<div id="bottomcard-container">{body}</div>' +
                 '</tpl>',
        });

        [... There are 7 Ext.Components, but I want to keep it short so I'm deleting them for Display on Stack ]


        this.postSinglePanel = new Ext.TabPanel({
            dock:'bottom',
            id:'singlepost-bottompanel',
            items:[ 
                this.bodycard, 
                this.funfactcard, 
                this.crosscard, 
                this.historycard, 
                this.architectcard, 
                this.commentcard, 
                this.dealscard, 

            ],
            tabBar:{
                dock:'bottom',
                scroll:'horizontal',
                layout:{
                    pack:'center',
                },
            },
        });


        var numberOfPages = 4;
        // Create pages for the carousel
        var pages = [];
        for (var i=0; i<numberOfPages; i++) {
            pages.push(new Ext.Component({
                id: 'page'+i,
                cls: 'page',
                tpl: '<tpl for=".">{body}</tpl>',
            }));
        }

        // Create the carousel
        this.carousel = new Ext.Carousel({
            id: 'carousel',
            defaults: {
                cls: 'card'
            },
            items: pages,
        });

        this.items = [this.carousel, this.postSinglePanel];

        App.views.PostSingleView.superclass.initComponent.call(this);
    },


});

Rubinsh Rubinsh · Accepted Answer · 2011-09-11T05:58:46

I think that this is what you need.

Basically the idea is to manually add the carousel items after the store has finished loading the data.

Here is a basic code for creating a carousel and populating the items from a store. this specific example is for an image gallery:

myApp.views.ImageGallery = Ext.extend(Ext.Panel,{

layout: {
    type: 'fit'
},

initComponent: function() {

    this.setLoading(true,true);

    var proxyUrl = 'my_url'

    var store = new Ext.data.Store({
        panel: this,
        model: 'myModel',
        proxy: {
            type: 'ajax',
            url: proxyUrl,
            reader: {
                type: 'json'
            }
        },
        listeners: {
            single: true,
            datachanged: function(){
                var items = [];
                store.each(function(rec){
                    items.push({
                        html: '<img class="myImage" src=' + rec.get('imageUrl') + '>'
                    });
                });

                var carousel = new Ext.Carousel({
                    cardSwitchAnimation: 'slide',
                    layoutOnOrientationChange: true,
                    ui: 'light',
                    items: items,
                    style: 'background: #000',
                    itemId: 'carousel'


                });

                this.panel.setLoading(false);
                this.panel.add(carousel);

                this.panel.doLayout();
            }

        }



    });
    store.read();
    myApp.views.ImageGallery.superclass.initComponent.call(this);
}});

Sencha Touch Carousel From JSON Store

1 Answers