关于Ext.extend的困惑

Question

code can run:
[code="java"]
var MyPanel = Ext.extend(Ext.Panel, {
buttons : [{
text : 'button',
handler : Ext.emptyFn()
}],
initComponent : function() {
Ext.apply(this, {
items : [new Ext.Panel()]
});
MyPanel.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('MyPanel', MyPanel);
[/code]
code error:
[code="java"]
var MyPanel = Ext.extend(Ext.Panel, {
buttons : [{
text : 'button',
handler : Ext.emptyFn()
}],
items : [new Ext.Panel()],
initComponent : function() {
Ext.apply(this, {});
MyPanel.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('MyPanel', MyPanel);
[/code]
create an instance of MyPanel
[code="java"]
Ext.onReady(function() {
var myPanelA = new MyPanel({
title : 'Panel A'
});

        myPanelA.render(Ext.getBody());
    })

[/code]

我的问题是items这个选项一定要在initComponent里配置吗?为什么?非常感谢

Answer 1

看了下Ext.Container-items的源码.
[code="javascript"]
// private
initComponent : function(){
Ext.Container.superclass.initComponent.call(this);

...

/**

• The collection of components in this container as a {@link Ext.util.MixedCollection}
• @type MixedCollection

• @property items
  */
  var items = this.items;
  if(items){
  delete this.items;
  if(Ext.isArray(items) && items.length > 0){
  this.add.apply(this, items);
  }else{
  //报错的地方
  this.add(items);
  }
  }
  },

  // private 应该是因为这句还没执行
  initItems : function(){
  if(!this.items){
  this.items = new Ext.util.MixedCollection(false, this.getComponentId);
  this.getLayout(); // initialize the layout
  }
  },
  // private
  setLayout : function(layout){
  if(this.layout && this.layout != layout){
  this.layout.setContainer(null);
  }
  //直到这里才执行
  this.initItems();
  this.layout = layout;
  layout.setContainer(this);
  }

[/code]