Question

我在配置Ext.Container时遇到了问题，而且它是带有项目的子类。我一直在尝试这样的东西：

var PanelSubclass = Ext.extend(Ext.Panel, {
    debugID: "DavidPanel",
    items: [{
        debugID: "DavidNumberField",
        xtype: "numberfield"
    }]
});
new PanelSubclass() //blows up

到目前为止我已经想到的是，在initComponent时，Ext.Container将为每个配置的项调用add（item）。作为参考，这里是Ext.Container.add的来源：

add : function(comp){
    this.initItems();
    var args = arguments.length > 1;
    if(args || Ext.isArray(comp)){
        var result = [];
        Ext.each(args ? arguments : comp, function(c){
            result.push(this.add(c));
        }, this);
        return result;
    }
    var c = this.lookupComponent(this.applyDefaults(comp));
    var index = this.items.length;
    if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
        this.items.add(c);
        // *onAdded
        c.onAdded(this, index);
        this.onAdd(c);
        this.fireEvent('add', this, c, index);
    }
    return c;
}

此方法的第一行调用initItems（），它设置一个Container的内部项Ext.util.MixedCollection，如下所示：

initItems : function(){
    if(!this.items){
        this.items = new Ext.util.MixedCollection(false, this.getComponentId);
        this.getLayout(); // initialize the layout
    }
}

所以看起来导致我的问题的是我在配置中指定了一个项目，因此if(!this.items)检查返回false，并且永远不会为我的Container设置真正的Ext.util.MixedCollection项目。

但这没有任何意义，因为你应该能够给Container一些物品，所以我想知道如何在地球上创造一个包含任何东西的容器。我在这做错了什么？

Answer 1

我觉得你真的搜索得太过分了。为什么你一直在寻找分析源代码。就像医生说的那样。我从未使用过extjs 3.4，我只使用了4.2。这就是为什么我不能非常具体。在ExtJs 4.2中你会写：

Ext.define('Myapp.MyPanel', {
    extend: 'Ext.panel.Panel',
    debugID: "DavidPanel",
    items: [{
        debugID: "DavidNumberField",
        xtype: "numberfield"
    }]
});
Ext.create('Myapp.MyPanel');

Answer 2

我在Sencha论坛上得到的答案是：

Ext.define('Foo', {
    extend: 'Ext.Container',
    initComponent: function() {
        this.items = [];
        Foo.superclass.initComponent.call(this);
    }
});

我使用Ext.extend将其翻译成此解决方案：

var PanelSubclass = Ext.extend(Ext.Panel, {
    debugID: "DavidPanel",
    initComponent: function(){
        this.items = [{
            debugID: "DavidNumberField",
            xtype: "numberfield"
        }];
        PanelSubclass.superclass.initComponent.call(this);
     }
 });
 new PanelSubclass();

这两项都有效。

Extjs 3.4.0，为什么我不能用项目配置Ext.Container？

2 个答案: