EXT.JS循環訪問商店並在商品數組中生成組件

Question

我正嘗試使用我的商店中填充的數據將一堆組件添加到我的容器中。我想遍歷我的商店記錄並輸出標籤/面板/等來顯示數據。

這是我如何通過循環現在：

initComponent: function() { 
    //Create a container for each array, then in that container, 
    //create a label and wrapping panel, then add the items to the wrapping panel 
    this.store = Ext.create('Ext.data.Store', { 
    model: 'MyProject.model.ItemArray', 
    data: [] 
    }); 
    Ext.apply(this, { 
    items: [ 
     this.store.each(function() { 
      { 
       xtype:'label', text: 
       'test' 
      } 
     }) 
    ] 
    }); 

    this.callParent(arguments); 
} 

當然但是，作爲ExtJS的小白，我，這是行不通的。我將不勝感激任何建議和最佳實踐提示，你可以提供這個工作。

我的模型ItemArray包含項目。我需要循環訪問我的ItemArrays存儲並創建容器，然後循環遍歷ItemArray中的Items，然後使用Items填充這些容器。

謝謝大家！

Answer 1

您需要首先加載您的商店，然後在商店回調中生成您的標籤。

var me = this; 
me.store.load(function(records) { 
    Ext.each(records, function(record) { 
     //Add a container for each record 
     me.add({ 
      xtype: 'container', 
      items: [] //your labels here 
     }); 
    }); 
});​ 

您的商店尚未填充您的示例。它也加載異步，所以會稍微延遲。

Answer 2

Ext.define('Foo', { 

    initComponent: function(){ 
     // assumes store is loaded with data 
     var store = new Ext.data.Store(), 
      items = []; 

     store.each(function(rec){ 
      items.push({ 
       html: rec.get('aField') 
      }); 
     }); 
     this.items = items; 
     this.callParent(); 
    } 

});