ExtJS编程基础--类(Classes)

创建一个类
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 用于指定超类或者基类构造。

我们使用

java

script的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();