来自 JSON 商店的 Sencha Touch Carousel

Posted 2023-02-26

【中文标题】来自 JSON 商店的 Sencha Touch Carousel

【英文标题】：Sencha Touch Carousel From JSON Store

【发布时间】：2011-09-07 14:02:45

【问题描述】：

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

在应用程序“发布视图”中，我正在加载发布信息（标题、正文等），并且我想要一个轮播显示数组“图像”中的所有图像，我通过 json 放入邮政。

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

目标是从列表中选择一个帖子，将数据加载到 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);
    ,


);

【参考方案1】：

我认为this 是您所需要的。

基本上这个想法是在商店加载完数据后手动添加轮播项目。

这是创建轮播和填充商店商品的基本代码。 这个具体的例子是一个图片库：

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

【讨论】：

它有帮助，但我需要如何从我的 Posts.store 获取信息并将其输入我的轮播。我已经有了一种动态的方式来生成它们。我遇到的唯一问题是更新卡片中的数据。

是否需要动态更新数据？还是只是在创建轮播时？

嗯，我有一个用户将选择的博客文章列表，将它们带到“文章”页面，基本上向他们展示文章的正文。这是一个选项卡视图，带有一个转到轮播的“图像”选项卡。当用户选择列表中的帖子时，我需要生成轮播。

我编辑了我的答案并添加了一个用于从数据存储加载其项目的轮播的代码示例

不是答案，但绝对让我走上了正确的道路。我很感激！