Extjs继承

/*假设现在有一面板类，我们在此基础上增加一个新的方法并重写（override）父类的一个方法，过程如下：
*/
var MyPanel=function(config){
//这里复用配置项
Ext.apply(this,{
width:300,
heihgt:300
});

//调用父类的构造函数，提取父类功能
MyPanel.superclass.constructor.apply(this,arguments);//arguments是实参
// 在这里你可以为当前对象新添加功能
// 如事件：
this.on('click',function(){alert('you Click'+this.title)},this);//on(事件名，处理函数，函数作用域)

}

// My Panel继承了Ext.Panel
Ext.extend(MyPanel,Ext.Panel,{
// 在这里你可以为当前的类加入静态的变量，所有这个类生成的实例都是使用这里声明的变量
// 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。
// 新添加的函数
myNewFunction:function(){alert("这是新添加的一个函数")},
// 重写原有函数
onRender:function(){
MyPanel.superclass.onRender.apply(this,arguments);
this.myNewFunction();
}

});

//实例化子类对象
var myfirstpanel=new MyPanel({
title:'My First Panel'
});

var mysecondpanel=new MyPanel({
title:'My Second Panel'
});


/*用重写构造器的方式实现继承*/
var MyPanel=function(config){
//调用父类的构造函数，提取父类的功能
MyPanel.superclass.constructor.call(this,Ext.apply({
//这里复用配置项
width:300,
height:300
},config));

//位于构造器这后，在这里你可以为当前对象新添加功能（如处理事件）
this.on('click',function(){alert("你已点击"+this.title)},this);
}



// My Panel继承了Ext.Panel
Ext.extend(MyPanel,Ext.Panel,{
// 在这里你可以为当前的类加入静态的变量，所有这个类生成的实例都是使用这里声明的变量
// 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。
// 新添加的函数
myNewFunction:function(){alert("这是新添加的一个函数")},
// 重写原有函数
onRender:function(){
MyPanel.superclass.onRender.apply(this,arguments);
this.myNewFunction();
}
});

//实例化子类对象
var myfirstpanel=new MyPanel({
title:'My First Panel'
});

var mysecondpanel=new MyPanel({
title:'My Second Panel'
});


/*以上的方法是重写构造器的方式实现继承的，另外我们还可以重写initComponents方法写出相同的功能，但需要指出是initComponent方法是属于 Ext.Components的方法，只能在组件上使用，不是一个通用的方法。这里是一个示例：*/

var MyPanel=Ext.extend(Ext.Panel,{
// 在这里你可以为当前的类加入静态的变量，所有这个类生成的实例都是使用这里声明的变量
// 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。
initComponent:function(){
//这里复用配置项
Ext.apply(this,{

width:300,
height:300
})
// 调用父类的构造函数，提取父类的功能
MyPanel.superclass.initComponent.apply(this,arguments);
// 位于构造器之后，在这里你可以为当前对象新添加功能（如处理如事件）
this.on('click',function(){alert("你已点击"+this.title)},this);
},
//新添加函数
myNewFunction:function(){
alert('这是一条新添加的函数');
},
//重写原有函数
onRender:function(){
MyPanel.superclass.onRender.apply(this,arguments);
this.myNewFunction();
}
});


//实例化子类对象
var myfirstpanel=new MyPanel({
title:'My First Panel'
});

var mysecondpanel=new MyPanel({
title:'My Second Panel'
});



<a href="javascript:myfirstpanel.title">first</a>
<a href="javascript:mysecondpanel.myNewFunction()">second</a>