Question

I’m trying to add a bunch of components to my container using data populated in my store. I want to iterate through my stores records and output a label/panel/etc to display the data.

This is how I’m looping through now:

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

But of course, being the EXTJS noob that I am, this doesn’t work. I would appreciate any advice and best practice tips you can provide to get this working.

My model, ItemArray, contains Items. I need to loop through my store of ItemArrays and make containers, then loop through the Items in the ItemArray populate those containers with Items.

Thanks everyone!

Answer 1

You need to load your store first, then on the store callback generate your labels.

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

Your store is not populated yet in your example. It also loads asynchronous so there will be a slight delay.