ExtJS的面向对象编程（继承、重写）

    <link rel="stylesheet" type="text/css" href="<%=basePath %>/ext-3.4/resources/css/ext-all.css">
    <script type="text/javascript" src="<%=basePath%>/ext-3.4/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="<%=basePath%>/ext-3.4/ext-all.js"></script>
    <script type="text/javascript">

        // ExtJS在支持面向对象编程中比JavaScript更接近传统的面向对象编程，提供的方法有：
        // extend、apply/applyif(属性嵌套)、override、namespaces/ns

        // 定义交通工具类(父类)
        function Vehicle(){
            this.x = 0;
            this.y = 0;
        }
        Vehicle.prototype.move=function(dx,dy){
            this.x += dx;
            this.y += dy;
        }

        // 汽车只在水平方法行驶
        function Car(){
            Car.prototype = new Vehicle();
            Car.prototype.move = function(dx){
                this.x += dx;
            }
        }

        // 电梯只在垂直方向行驶
        function Elevator(){
            Elevator.prototype = new Vehicle();
            Elevator.prototype.move = function(dy){
                this.y += dy;
            }
        }

        // 使用对象作为设置参数
        function Vehicle(config){
            this.x = config.x;
            this.y = config.y;
        }

        Vehicle.prototype.toString = function(){
            return "Point:("+x+","+y+")";
        }

        function Car(config){
            // 明确scope为Car实例
            Vehicle.prototype.constructor.call(this,config);
            this.color = config.color;
        }

        // 使用Ext提供的extend函数
        Ext.extend(Car,Vehicle,{
            // 重写父类move
            move:function(dx){
                this.x += dx;
            },
            // 重写父类的toString
            toString:function(){
                var str = "Car is"+this.x+" miles away from original position";
                str += "this car is "+this.color;
                return str;
            }
        });

        var  config = {x:10,y:0,color:"white"};
        var car = new Car(config);
        car.move(150);
        console.info(car.toString());
        // Ext.extend保留父类与子类同名的属性，ExtJS可以直接产生重写的子类
        // 只需要先定义父类，然后定义一个变量，将Ext.extend返回的子类赋给这个变量即可

        var Taxi = Ext.extend(Vehicle,{
            // 构造函数也可以重写
            constructor:function(){
                Vehicle.prototype.constructor.call(this,config);
                this.color = config.color;
            },
            // 重写move方法
            move:function(dx){
                this.x+=dx;
            },
            // 重写toString方法
            toString:function(){
                var str = "Taxi is"+this.x+" miles away from original position";
                str += "this car is "+this.color;
                return str;
            }
        });

        var  taxiConfig = {x:10,y:0,color:"white"};
        var taxi = new Taxi(taxiConfig);
        taxi.move(150);
        console.info(taxi.toString());
        // 注：
        // 在定义子类的时候往往需要重写一些从父类继承而来的属性。编写视图组件的时候，特别容易混淆属性究竟是在父类还是在子类一般是：
        // 1、如果父类中定义有这个属性，就使用新的值代替父类中的属性值
        // 2、如果父类没有定义这个属性，就不用覆盖
        // 3、在设置父类属性时，有默认值用于辅助设置
        // 以上需求可以使用apply/applyif来满足，如下：
        var config1 = {width:100,height:200,alpha:1};
        var config2 = {widht:100,height:0.5,alpha:25};
        console.debug("before Ext.apply() config1 with [%d,%d] alpha:%f",
            config1.width,
            config1.height,
            config1.alpha
        );
        // 不管Config1原有属性存在否，一律重写
        // 第一个参数是目的对象，第二个参数是源对象
        // 把config2的属性拷贝覆盖config1的属性
        Ext.apply(config1,config2);
        console.debug("After Ext.apply() config1 with [%d,%d] alpha:%f",
            config1.width,
            config1.height,
            config1.alpha,
            config1.angle
        );
        // 如果不希望重写，可以改用applyIf(),父类已经有既定的值，这个值将不会被重写。但不管apply还是applyIf，config2如果含有config1
        // 不存在的属性，这个属性会自动复制到config1中，Ext.apply还接收第三个参数，作为默认值使用

        // 组件可能的默认值
        var defaults = {width:50,alpha:1,color:"white"};
        var config3 = {width:100,height:200,alpha:1};
        var config4 = {width:150,alpha:2,angle:25};

        console.debug("before Ext.apply() config1 with [%d,%d] alpha:%f",
            config3.width,
            config3.height,
            config3.alpha
        );
        Ext.apply(config3,config4,defaults);
        console.debug("After Ext.apply() config1 with [%d,%d] alpha:%f",
            config3.width,
            config3.height,
            config3.alpha,
            config3.angle,
            config3.color
        );
        // Ext.override()方法提供了重写方法的一种途径，他有两个参数，一个是要重写的类，另一个是要重写的方法（用对象封装）
        function Bus(){
        }
        Bus.prototype.move = function(){
            return "Bus move";
        }
        Bus.prototype.toString = function(){
            return "this is a bus";
        }
        Ext.override(Bus,{
            move:function(){
                return "Bus move on road";
            },
            toString:function(){
                return "this is a beautiful bus";
            },
            nice:"不是方法也可以重写"
        })

        var bus = new Bus();
        console.info(bus.move());
        console.info(bus.toString());
        console.info(bus.nice);

    </script>