extjs - 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 包含 Items。我需要遍历我的 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();
    }

});