[转]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();