[转]ExtJS编程基础--类

创建一个类
Javascript与其他的面向对象语言不同，如C++，Java或PHP等。它并不是基于类的，而是基于原型的一种语言。

在Javascript中创建一个类是非常容易的：你不必通过定义一个类然后实例化该类来创建一个对象。我们在这里使用了一个对象构造器。它满足了使用单个对象的场合。如果我们需要使用同一个类型的多个对象，我们必须使用一个构造器函数和new关键字。
例:
Person 类: 使用 Person 类:
var Person = function(config) {

Ext.apply(this,config);

}; var me = new Person({fName: ‘Aaron’,lName:‘Conran’, dob:’03/23/1984’});

Ext.apply
Ext.apply 复制一个对象所有属性到另一个.
Ext.apply 通常是在一开始被创建者拷贝配置参数到这个空间
New 关键字，创建了新的空白对象的空间。
您还可以提供第三个参数作为默认配置。
例:
复制内容到剪贴板
代码:

Ext.apply(this, config);
// with defaults
var defConfig = {test: ‘abc’};
Ext.apply(this, config, defConfig);
Ext.applyIf
Ext.applyIf 作用类似于 Ext.apply
唯一区别:如果属性已经存在，Ext.applyIf不会将它重写 。
例:
复制内容到剪贴板
代码:

var point = point || {};
var default = {x: 0, y: 0};
//将default拷贝到point，如果point没有相应属性
Ext.applyIf(point, default);
Ext.extend
Ext.extend 是用来扩展或继承，从已存在的类。

通用模式 :
复制内容到剪贴板
代码:

var SubClass = function() {
SubClass.superclass.constructor.call(this);
};
Ext.extend(SubClass, BaseClass, {
newMethod : function() {},
overriddenMethod : function() {}
};
SubClass继承BaseClass、覆盖 overridenMethod 方法并新增 newMethod方法.

superclass.constructor
superclass.constructor 用于指定超类或者基类构造。
我们使用javascript的call方法运行构造函数，在适用范围上。
第一个参数总是this，以保证构造器工作在调用函数的作用域。其它参数将被传递给父类的构造函数
例:
复制内容到剪贴板
代码:

BaseClass.superclass.constructor.call(this, config);
继承一个Ext类
继承和定制Ext的类，是很容易的
目标:创造一个对继承BasicDialog
-创建DefaultDialog类并继承BasicDialog
-提供一套默认配置进行对话
·modal, width, height, shadow, draggable等
-无需添加/覆盖方法到BasicDialog
复制内容到剪贴板
代码:

var DefaultDialog = function(config) {
var config = config || {}; // 默认配置以清空对象
var defConfig = {title: ‘Default’, // 提供一个默认配置
height: 130,
width: 250,
shadow: true,
modal: true,
draggable:true,
fixedcenter:true,
collapsible: false,
closable: true,
resizable:false};
Ext.applyIf(config, defConfig); // 将defConfig 的所有属性复制到config ，如果config 没有相应的属性
var el = Ext.DomHelper.append(document.body, {tag: ‘div’}); // 创建 el
DefaultDialog.superclass.constructor.call(this, el, config); // 运行 superclass
};
Ext.extend(DefaultDialog, Ext.BasicDialog); // DefaultDialog 继承 Ext.BasicDialog
DefaultDialog例子
现在，我们可以重新使用DefaultDialog 类

通过配置选项，我们可以重置默认选项

dlg = new DefaultDialog({title: 'First Dialog', width: 300});
dlg.show();

通过省略配置，我们假定为默认选项

dlg2 = new DefaultDialog();
dlg2.show();