扩展ExtJs3.X组件(两种方法)

/**
* 扩展Ext现有组件的两种方式
*/
// -----------------------第一种----------------------------
/**
* 这是扩展组件的构造方法 在里面可以进行很多初始化操作
*/
Ext.ux.MyFirstWindow = function(config) {
Ext.apply(this, config)// 复制配置对象属性到扩展组件
Ext.ux.MyFirstWindow.superclass.constructor.apply(this,
arguments);// 调用父类构造方法
// 继承父类的属性
// 在这里还可以调用一些其他的方法或自己定义的方法
// 比如：this.init(cfg); 如果你在extend方法内定义了该方法
}

/**
* 我们来扩展Ext.Window
*/
Ext.extend(Ext.ux.MyFirstWindow, Ext.Window, {
// 为扩展组件的属性赋予默认值
title : 'Default Title',
width : 300,
height : 200,
// 重写父类的组件初始化方法
initComponent : function() {
var self = this;// 如果初始化组件里有方法 这样就可以保持对制定范围内this的引用
this.buttons = [{
text : 'Save',
handler : function() {
Ext.Msg.show({
title : self.title,
buttons : Ext.Msg.OK,
icon : Ext.Msg.QUESTION,
msg : 'You Clicked Me'
})
}
}]

// 一定要记得调用父类的initComponent方法
Ext.ux.MyFirstWindow.superclass.initComponent
.call(this);
// 接下来可以注册事件监听器
this.on('close', function() {
Ext.Msg.alert("title", "Window Closed");
})
}
})

var myFirstWin = new Ext.ux.MyFirstWindow({
// 这是配置对象 可以覆盖默认值
})
myFirstWin.show(Ext.getBody());

//------------------------------------------------------

// 第二种扩展的方式是继承Ext.util.Observable 所有组件的顶级父类 它是直接继承Object的
// 第一步同样是构造方法 复制配置对象属性 继承父类属性
Ext.ux.MySecondWindow = function(config) {
Ext.apply(this, config);
Ext.ux.MySecondWindow.superclass.constructor.apply(this,
arguments);
}

Ext.extend(Ext.ux.MySecondWindow, Ext.util.Observable, {
// 在这里可以添加任意需要的属性和自己定义的属性
myTitle : 'DefaultTitle',
win : null,
buttons : null,
tbar : null,
show : function() {
var self = this;// 同样是保存this引用

var tbar = [{
text : 'Hello',
handler : function() {
Ext.Msg.alert("Title",
"You Clicked....");
}
}];
var cfg = {
title : self.myTitle,
width : 300,
height : 200,
tbar : tbar
}
self.win = new Ext.Window(cfg)
self.win.show(Ext.getBody());
}
})
var mySecondWin = new Ext.ux.MySecondWindow({
// 自定义属性值 覆盖默认值
})
mySecondWin.show(Ext.getBody());