Extjs 学习总结-Ext.define自定义类

本教程整理了extjs的一些基本概念及其使用，包括自定义类（Ext.define）、数据模型、代理等。本节介绍使用Ext.define自定义类

使用Ext.define自定义类

1. 首先看看js中自定义类的代码：

var Person = function (name, age) {
    this.Name = "";
    this.Age = 0;
    this.Say = function (msg) {
        alert(this.Name + " Says : " + msg);
    }

    this.init = function (name, age) {
        this.Name = name;
        this.Age = age;
    }

    this.init(name, age);
}

在这段代码中，我们定义了Person类，它具有Name 和 Age 两个属性，具有 Say 和 init 公有方法。

创建对象的代码：

var Tom = new Person("Tom", 26);
Tom.Say("Hello");

2. 下面主要介绍ExtJS.define自定义类d的实现。

Ext.define("Person", {
    Name: '',
    Age: 0,
    Say: function (msg) {
        Ext.Msg.alert(this.Name + " Says:", msg);
    },
    constructor: function (name, age) {
        this.Name = name;
        this.Age = age;
    }
});

用法和上述js创建对象用法一致。

3. ExtJS中类的继承

ExtJS 允许对现有的类进行扩展，其扩展可以通过继承来实现。代码如下：

Ext.define("Developer", {
    extend: 'Person',
    Coding: function (code) {
        Ext.Msg.alert(this.Name + " 正在编码", code);
    },
    constructor: function(){
        this.callParent(arguments);
    }
});

在构造函数中，通过调用this.callParent 方法，实现对属性的初始化。需要说明的是，如果此处只调用了父类的构造方法，则可以省略掉，ExtJS 会自动为我们调用父类的构造函数。所以我们此处的代码可以进行简化：

Ext.define("Developer", {
    extend: 'Person',
    Coding: function (code) {
        Ext.Msg.alert(this.Name + " 正在编码", code);
    }
});

需要注意的是，如果你在子类中使用了构造函数，ExtJS 则不会再自动调用父类的构造函数。和java不一样哦

4. 创建类的对象(ExtJS 中类的选项 - config)

下面看一般情况下创建对象的方式：

var Bill = new Developer("Bill", 26);
Bill.Coding("int num1 = 0; ");

一般这种情况是使用构造函数来完成传入参数的初始化工作，在传入的参数较多时，就很不方便了。这时Extjs提供了类的选项config。通过config。

我们在类的定义中添加了config项，将需要在配置中完成的属性添加在里面，而在构造函数中，我们通过调用this.initConfig方法完成对config的初始化。看一下用法：

Ext.define("Person", {
    config: {
        Name: '',
        Age: 0,
    },
    Say: function (msg) {
        Ext.Msg.alert(this.Name + " Says:", msg);
    },
    constructor: function (config) {
        this.initConfig(config);
    }
});
var Tom = Ext.create("Person", {
    Name: 'Tom',
    Age: 26
});
Tom.Say("Hello");

除了代码更加清晰简洁以外，ExtJS 还为我们生成了访问器，我们可以通过下面的方式访问Tom的属性：

Tom.setAge(20);
alert(Tom.getAge());

参考链接：http://www.qeefee.com/extjs-course-3-define-classes