Extjs入门1-1 Extjs自定义类

1：javascript 自定义类：定义Person类，有两个属性，两个方法，init类似于构造方法

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);
}

运行时：

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

2：一  Extjs自定义类： 定义Person类

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;
    }
});

运行时：

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

  二  Extjs中的继承

重新定义一个Coding方法，需要说明的是，如果此处只调用了父类的构造方法，则可以省略掉，ExtJS 会自动为我们调用父类的构造函数，所以constructor这一方法没有必要写

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

运行时：

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

  三 config

如果类中有几十个属性，那么我们使用构造函数就要传入几十个参数来对它完成初始化，这是一件很恐怖的事情。在ExtJS 中可以在定义类的时候为它添加配置项，然后调用ExtJS 内置的方法完成初始化，并可以生成访问器（类似于C#里面的get和set方法）。

我们来修改Person类，使它可以通过config初始化：

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

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

var Tom = Ext.create("Person", {
    Name: 'Tom',
    Age: 26
});
Tom.Say("Hello");

我们对Person类做一个简单的修改，将类名的全称修改为MyApp.Person（相当于为Person添加了命名空间）：

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

我们只修改了第一行，其它代码不变。这个时候我们使用之前的代码实例化Person类：

var Tom = Ext.create("Person", {
    Name: 'Tom',
    Age: 26
});
Tom.Say("Hello");

刷新页面，但是出错：这时就用到别名了。

我们为MyApp.Person 类添加别名：

Ext.define("MyApp.Person", {
    config: {
        Name: '',
        Age: 0,
    },
    alias:"Person",
    Say: function (msg) {
        Ext.Msg.alert(this.Name + " Says:", msg);
    },
    constructor: function (config) {
        this.initConfig(config);
    }
});

很简单，只要一行代码，ExtJS 为我们完成了别名的定义。