如何从商店动态获取图像到旋转木马煎茶触摸 2答案

【问题标题】：How to get dynamically images from the store to the carousel sencha touch 2如何从商店动态获取图像到旋转木马煎茶触摸 2
【发布时间】：2013-06-19 14:28:47
【问题描述】：

我正在尝试从商店获取图像，并控制图像的数量，并为每个轮播显示 12 张图像，所有这些都取决于商店中的图像数量，如果最多为前：12，为其余部分创建另一个轮播... 但我试图从商店中获取图像并将其加载到轮播中，但我的视图是空的，什么都没有显示..

型号：

  Ext.define("MyApp2.model.ApplicationModel", {
    extend: "Ext.data.Model",
    config: {
      //type:'tree',
      fields: [
        {name: 'id', type: 'auto'},
        {name: 'name', type: 'auto'},
        {name:'icon',type:'image/jpg'}
      ]
   } 
 });

商店：

    var token=localStorage.getItem("access_token");
    Ext.define("MyApp2.store.ApplicationStore", {
    extend: "Ext.data.Store",
    requires: ["Ext.data.proxy.JsonP"],
    config: {
    model: "MyApp2.model.ApplicationModel",
    autoLoad: true,
    id :'ApplicationStr',
    proxy: {
      type: 'jsonp',
      url: 'http://mysite.com/api/applications?format=jsonp&access_token='+token,
      reader: {
        type: 'json',
        rootProperty: 'applications'
      }
    }

   }    
  });

     var store = Ext.create('MyApp2.store.ApplicationStore');
       store.getStore('ApplicationStr');

                myCarousel = Ext.getCmp('carouselid');
                store.each(function(record) {
                    myCarousel.add({
                        html: '<img src=' + record.get('icon') + '/>'
                    });
                });

观点：

  Ext.define('MyApp2.view.MainMenu', {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar', 'MyApp2.store.ApplicationStore', 'Ext.dataview.List', 'Ext.Img'],
alias: 'widget.mainmenuview',
config: {
    layout: {
        type: 'fit'
    },
    items: [{
            xtype: 'titlebar',
            title: 'My Apps',
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Log Off',
                    itemId: 'logOffButton',
                    align: 'right'
                }
            ]
        },
        {
            xtype: "carousel",
            id: 'carouselid'


        }


    ],
    listeners: [{
            delegate: '#logOffButton',
            event: 'tap',
            fn: 'onLogOffButtonTap'
        }]
},
onLogOffButtonTap: function() {
    this.fireEvent('onSignOffCommand');
}

});

【问题讨论】：

标签： sencha-touch-2 store carousel

【解决方案1】：

可能是在您开始迭代之前未加载存储中的数据。为了避免这种情况，您应该始终在加载事件回调中使用数据。

您可以做两件事，在商店中添加负载侦听器并在其中进行轮播填充

listeners:{
    load: function( me, records, successful, operation, eOpts ){ 
        console.log("data loaded", records);
        myCarousel = Ext.getCmp('carouselid');
        for(var i=0; i<records.length; i++){
            myCarousel.add({
                html: '<img src=' + records[i].get('icon') + '/>'
            });
        }
    }
}

或者您可以在需要时手动调用 load 并在回调中执行如下操作：

store.load({
    callback: function(records, operation, success) {
        myCarousel = Ext.getCmp('carouselid');
        for(var i=0; i<records.length; i++){
            myCarousel.add({
                html: '<img src=' + records[i].get('icon') + '/>'
            });
        }
    },
    scope: this
});

【讨论】：