ExtJS4.2使用Ext.define自定义类（二）

javascript自定义类如下：

<script type="text/javascript">
         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");   
   </script>

效果图如下：

ExtJS 中自定义类
在ExtJS中，我们同样定义一个Person类，首先看一下具体的代码：

<script type="text/javascript">
    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;
        }
    });

Ext.onReady(function(){
       var Tom = new Person("Tom", 26);
       Tom.Say("Hello");
 });
</script>

运行效果图如下：

ExtJS 中类的继承
ExtJS 允许对现有的类进行扩展，其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person类进行继承，定义一个Developer类，它继承自Person，同时还拥有Coding方法，代码如下：

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

Ext.onReady(function(){
   var Bill = new Developer("Bill", 26);
   Bill.Coding("int num1 = 0; ");
});

ExtJS 使用 extend来实现继承。我们为Developer 类添加了Coding 方法，这是我们对Person类进行的扩展。在构造函数中，通过调用this.callParent 方法，实现对属性的初始化。需要说明的是，如果此处只调用了父类的构造方法，则可以省略掉，ExtJS 会自动为我们调用父类的构造函数。所以我们此处的代码可以进行简化：
运行效果图如下：

ExtJS 中类的选项 - config
我们在ExtJS中定义一个Window对象，代码如下：

var win = Ext.create("Ext.window.Window", {
    title: 'MyWin',
    width: 300,
    height: 200
});
Ext.onReady(function(){
   win.show();
   });

效果图：

我们来修改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的初始化。看一下用法：

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

运行效果图：

未完待续。。。