Extjs入门1-1Extjs自定义类

extjs入门1-1extjs自定义类。

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 为我们完成了别名的定义。