『ExtJS』01 002. ExtJS 4 类的继承

介绍在ExtJS 4中类的继承。

几点说明

---

1. 这边文章主要讲解如何去扩展一个已经存在的类，以及使用新的方法重载父类的方法。
2. 我们将定义一个简单的类Vehicle，在其中有Manufacturer、Model、Top speed三个属性，一个travel方法。

代码

---

ExtJS：4.0.7

IDE：Eclipse Java EE

浏览器：Chrome 25

//-------父类--------------------------------------

Ext.define('Cookbook.Vehicle', {
    config : {
        manufacturer : 'Unknown Manufacturer',
        model : 'Unknown Model',
        topSpeed : 0
    },

    constructor : function(manufacturer, model, topSpeed) {
        // initialise our config object
        this.initConfig();

        if (manufacturer) {
            this.setManufacturer(manufacturer);
        }
        if (model) {
            this.setModel(model);
        }
        if (topSpeed) {
            this.setTopSpeed(topSpeed);
        }
    },

    travel : function(distance) {
        alert('The ' + this.getManufacturer() + ' ' + this.getModel()
                + ' travelled ' + distance + ' miles at ' + this.getTopSpeed()
                + 'mph');
    }
}, function() {
    console.log('Vehicle Class defined!');
});

//-------调用父类------------------------------------

var vehicle = Ext.create('Cookbook.Vehicle', 'Aston Martin', 'Vanquish', 60);
vehicle.travel(100);

//-------子类--------------------------------------

Ext.define('Cookbook.Plane', {
    extend : 'Cookbook.Vehicle',

    config : {
        maxAltitude : 0
    },

    constructor : function(manufacturer, model, topSpeed, maxAltitude) {
        // intialise our config object
        this.initConfig();

        if (maxAltitude) {
            this.setMaxAltitude(maxAltitude);
        }

        // call the parent class' constructor
        this.callParent([ manufacturer, model, topSpeed ]);
    }
}, function() {
    console.log('Plane Class Defined!');
});

//-------实例化并调用----------------------------------

var plane = Ext.create('Cookbook.Plane','Boeing','747',500,30000);
plane.travel(800);

说明

---

1. extend配置选项告诉Ext.Class扩展预处理器你的新类继承自哪里。预处理器会合并所有父类的成员到新的类中，达到扩展类的目的。
2. callParent方法是一种执行父类方法的途径。
3. 我们可以使用与父类方法名称相同，但参数不同的方法来对父类的方法进行重载。
4. 类的继承示意图：

总结

---

总的来说，ExtJS关于类的继承，在概念上于一般的继承相同。不同的就是这种代码的书写格式需要记忆与注意。（PS：特别是符号千万不要漏了！）