Geek asks and answers

EXT.JS cycles through the store and generates components inside an array of elements

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

This is how I loop 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 an EXTJS noob that I, this does not work. I would appreciate the advice and best practice advice you can provide in order to get this job.

My ItemArray model contains items. I need to go through my ItemArrays store and make containers, and then scroll through the items in ItemArray, fill these containers with Items.

Thanks everyone!

+5
source share
2 answers

, .

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

. , .

+5
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();
    }

});
+1

More articles:


All Articles