Карусель Sencha Touch от магазина JSON

Question

Я создаю сайт Wordpress, используя Sencha Touch.Я создал плагин, который преобразует сообщения в JSON для приложения для чтения.

В приложениях «Просмотр сообщений» я загружаю информацию о записях (заголовок, текст и т. Д.) И хочу иметь карусель, отображающую все изображения в массиве «изображения», которые я поместил черезJSON внутри поста.

Мое приложение использует структуру MVC (потому что мне нравится ощущение, что мои зубы тянутся), и поэтому мне нужен список сообщений, чтобы передать данные на панель «Одиночные сообщения», а затем получить массив изображений вКарусель

Цель состоит в том, чтобы выбрать сообщение из списка, загрузить данные в одно сообщение (в настоящее время работает), а затем загрузить изображения из этого сообщения в карусель.

Любые и все предложения очень ценятся.

Вот что у меня есть на данный момент:

JSON: http://pastie.org/2497239 (Обозреватель стека не позволил бы мне отображать json, вот пастин)

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,
        });
    },

});

Главный контроллер с действием «ViewPost»:

    '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' }
        );
    },

Просмотр одного сообщения (который отображает данные из сообщения)

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);
    },


});

Answer 1

Я думаю, что это - это то, что вам нужно.

По сути, идея состоит в том, чтобы вручную добавлять элементы карусели после того, как магазин завершил загрузку данных.

Вот базовый код для создания карусели и наполнения предметов из магазина. этот конкретный пример для галереи изображений:

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);
}});