Comment rendre les panneaux dans ExtJS 4

Question

le nombre de panneaux dépend du nombre de données du magasin et devrait rendre sous forme ci-dessus -à-dire deux colonnes

mon code est

Ext.define('ConnectionsFeed.view.Communities',{ 
    extend: 'Ext.container', 
    requires: 'ConnectionsFeed.store.Communities', 
    store: 'Communities', 
    alias: 'widget.communities', 
    layout: 'table', 

initComponent: function(){ 
    var x = this; 
    this.store.each(function(item){ 
    x.add(new Ext.panel.Panel()); 
    }); 
} 
}); 

Ext.create('ConnectionsFeed.view.Communities',{ 
    renderTo: Ext.getBody() 
}); 

mais obtenir l'erreur suivante

> Uncaught TypeError: Cannot read property 'isInstance' of undefined 
> ext-all.js:21 (anonymous function) ext-all.js:21 Ext.apply.doProcess 
> ext-all.js:21 (anonymous function) ext-all.js:21 Ext.apply.require 
> ext-all.js:21 (anonymous function) ext-all.js:21 Ext.apply.doProcess 
> ext-all.js:21 Ext.apply.doProcess ext-all.js:21 Ext.apply.process 
> ext-all.js:21 Ext.Class.c ext-all.js:21 Ext.ClassManager.create 
> ext-all.js:21 Ext.apply.define ext-all.js:21 (anonymous function) 

Answer 1

Ext.Store.each() appelons une fonction pour chaque élément dans le magasin de données. La fonction en question doit ajouter une instance de votre panneau à un conteneur avec la disposition table.

YourStore.each(function(item) { 
    //container declared elsewhere 
    container.add(new YourPanel(item)); 
}); 

Answer 2

Il vous manque un appel à this.callParent() à la fin de initComponent.

Answer 3

Un conteneur n'a également aucun magasin. Vous devrez créer une instance dans votre initComponent et le charger.

Ext.define('ConnectionsFeed.view.Communities', { 
    extend: 'Ext.container', 
    requires: 'ConnectionsFeed.store.Communities', 
    store: 'Communities', 
    alias: 'widget.communities', 
    layout: 'table', 

    initComponent: function() { 
     var x = this; 

     x.store = Ext.create('ConnectionsFeed.store.Communities'); 

     //If you override initComponent you need to call its parent 
     x.callParent(); 
    }, 
    afterRender: function() { 
     var x = this; 

     x.store.load({ 
      scope: x, 
      //Callback function after the store has loaded 
      callback: function(records, operation, success) { 
       Ext.each(records, function(record) { 
        //Your logic of add a panel here 
        x.add(Ext.create('....')); 
       }); 
      } 
     }); 

     x.callParent(); 
    } 
}); 

Ext.create('ConnectionsFeed.view.Communities', { 
    renderTo: Ext.getBody() 
});​