JSON 商店中的 Sencha Touch 轮播

Question

我正在使用 Sencha Touch 构建一个 Wordpress 网站。我创建了一个插件，可以将帖子转换为 JSON 以便应用程序读取。

在应用程序“帖子视图”中，我正在加载帖子信息（标题、正文等），并且我希望有一个轮播来显示我在帖子中放入的 json 数组“图像”中的所有图像。

我的应用程序使用 MVC 结构（因为我喜欢拔牙的感觉），因此我需要一个帖子列表来将数据传递到 Single Posts 面板，然后将 Images 数组放入轮播中。

目标是从列表中选择一个帖子，将数据加载到 postsingleview（当前正在工作）中，然后将该帖子中的图像加载到轮播中。

非常感谢任何和所有建议。

这是我到目前为止所拥有的：

JSON: http://pastie.org/2497239 （Stack 的代码包装器不会让我显示json，这是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,
        });
    },

});

具有“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);
}});