javascript - 如何在 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

您在 initComponent 末尾缺少对 this.callParent() 的调用。

Answer 2

Ext.Store.each()让您为数据存储中的每个元素调用一个函数。有问题的函数应该将您的面板实例添加到具有table布局的容器中。

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

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