如何從商店動態圖像傳送到傳送帶sencha touch 2

Question

我試圖從商店中獲取圖像，並控制圖像的數量，並顯示每個輪播的12個圖像，所有這些動態取決於數量如果它的商店，如果它達到例如：12，爲其餘創建一個其他的旋轉木馬...... ，但我試圖開始從商店獲取圖像並將其加載到旋轉木馬，但我的看法是空的，沒有什麼是diplaying ..

型號：

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

}）;

Answer 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') + '/>' 
      }); 
     } 
    } 
} 

或在需要時可以手動呼叫負載和做，在回調是這樣的：

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