ext 报告错误：this.items.add is not a function

代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



allControl.html
Ext.BLANK_IMAGE_URL = 'images/default/s.gif'; Ext.onReady(function(){ var ContentPanel = Ext.extend(Ext.Panel,{ width:1024, height:720, layout:'border' }); var northPanel = Ext.extend(Ext.Panel,{ width:1024, height:20, layout:'column', region:'north', [color=red] items:{ text:'Extjs 控件实例', scope:this },//错误出在这！，注释掉他不会报错。[/color] }); var weastPanel = Ext.extend(Ext.Panel,{ width:100, height:400, region:'weast', }); var centerPanel = Ext.extend(Ext.Panel,{ width:924, height:400, region:'center', bodyStyle:'background:blue', }); var eastPanel = Ext.extend(Ext.Panel,{ width:100, height:400, region:'east', }); var southPanel = Ext.extend(Ext.Panel,{ width:1024, height:300, region:'south', }); var content = new ContentPanel(); var north = new northPanel(); // var weast = new weastPanel(); var center = new centerPanel(); // var east = new eastPanel(); // var south = new southPanel(); content.add(north); // content.add(weast); content.add(center); // content.add(east); // content.add(south); content.render(Ext.getBody()); }); content { width:1280px; height:800px; background:#0CF; } ti



上面最后一段代码有误
[code="js"]
var TestPanel = Ext.extend(Ext.Panel, {
xxx : "xxx",
initComponent : function(){
this.items = [
{xxx:"xxx"}
];
// Ext.Panel.superclass.initComponent.apply(this, arguments);

TestPanel.superclass.initComponent.apply(this, arguments);
}
});
[/code]

items:[{
text:'Extjs 控件实例',
scope:this
}],//items是一个数组

在Ext中，如果想要扩展组件，那一定要注意，[b]不要把非只读的对象类型的配置作为属性扩展[/b]，因为这样会使扩展出来的组件的每个实例都共享一个对象。

并且Ext中有很多处理逻辑是先删除自身的属性，再初始化。（配置与内部属性名字相同，有冲突）
例如你的代码：
[quote][code="js"]
var northPanel = Ext.extend(Ext.Panel,{
width:1024,
height:20,
layout:'column',
region:'north',
items:{
text:'Extjs 控件实例',
scope:this
}
});
[/code][/quote]
Container在initComponent中会先判断items配置：
[code="js"]
var items = this.items;
if(items){
delete this.items; // 这一步删除其实无效，因为items被扩展到原型
this.add(items);
}
[/code]
而add方法中，会调用initItems初始化this.items（创建完毕的容器中，items是Ext.util.MixedCollection类型，用于存放子组件实例）
[code="js"]
// private
initItems : function(){
if(!this.items){ // 前面delete只删除自身，但原型中还存在items，所以不会走到里面的流程
this.items = new Ext.util.MixedCollection(false, this.getComponentId);
this.getLayout(); // initialize the layout
}
},
[/code]
this.items处理失败，但add方法会认为它已经成功创建，然后执行到这步就会出错：
[code="js"]
this.items.add(c); // this.items实际上还是扩展时设置的属性，即原型中的属性
[/code]

解决办法是，将这些对象放置于构造方法或initComponent中创建：
[code="js"]
var TestPanel = Ext.extend(Ext.Panel, {
xxx : "xxx",
initComponent : function(){
this.items = [
{xxx:"xxx"}
];
Ext.Panel.superclass.initComponent.apply(this, arguments);
}
});
[/code]