Extjs 3.4.0, why can't I configure an Ext.Container with items?

Question

I've been having trouble configuring Ext.Container and it's subclasses with items. I've been trying stuff like this:

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

What I've figured out so far is that at initComponent time Ext.Container will call add(item) on itself for each of the configured items. For reference, here is the source for 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;
}

The first line of this method calls initItems() which sets up a Container's internal items Ext.util.MixedCollection like so:

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

So it looks like what's causing my problem is that I've specified an items in my configuration so the if(!this.items) check returns false and a true Ext.util.MixedCollection of items is never setup for my Container.

But that doesn't make any sense because you're supposed to be able to give a Container some items, and so I'm left wondering how on earth creating a container that contains anything ever manages to work. What am I doing wrong here?

Answer 1

The answer that I got on the Sencha forums was this:

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

I translated that to this solution using 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(); 

Both of these will work.