从JSON商店Sencha Touch Carousel

Question

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

在应用程序“邮政视图”我加载发布信息（标题，正文等），我想有一个旋转木马，显示阵列中的所有图像“图像”，我已通过json内该职位。

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

我们的目标是从列表中选择一个帖子，将数据加载到postsingleview（目前的工作），然后从该职位进入转盘加载图像。

任何和所有的建议非常赞赏。

这是我到目前为止有：

JSON：http://pastie.org/2497239（堆栈的codewrapper不会让我显示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' } 
     ); 
    }, 

发布单个Vi ew（显示帖子中的数据）

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

我认为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); 
}});