如何在Ext Js 4中渲染面板

Question

面板的數量取決於存儲數據的數量，並且應該以上面顯示的形式呈現，即兩列

我的代碼是

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

但是出現以下錯誤

 > 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（）讓我們為數據存儲中的每個元素調用一個函數。 有問題的函數應將面板的實例添加到具有table布局的容器table 。

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

Answer 2

您在initComponent的末尾缺少對this.callParent（）的調用。

Answer 3

另外，容器沒有存儲。 您需要在initComponent中創建一個實例並加載它。

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