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>
时间: 07-29

ExtJS的面向对象编程(继承、重写)的相关文章

C++ Primer 学习笔记_69_面向对象编程 --继承情况下的类作用域

面向对象编程 --继承情况下的类作用域 引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:如果不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这种类作用域的层次嵌套使我们能够直接访问基类的成员,就好像这些成员是派生类成员一样: Bulk_item bulk; cout << bulk.book() << endl; 名字book的使用将这样确定[先派生->后基类]: 1)bulk是Bulk_item类对象,在Bulk_item类中查找,找不到名

C++ Primer 学习笔记_69_面向对象编程 -继承景况下的类作用域

面向对象编程 --继承情况下的类作用域 引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:如果不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这种类作用域的层次嵌套使我们能够直接访问基类的成员,就好像这些成员是派生类成员一样: Bulk_item bulk; cout << bulk.book() << endl; 名字book的使用将这样确定[先派生->后基类]: 1)bulk是Bulk_item类对象,在Bulk_item类中查找,找不到名

Javascript 进阶 面向对象编程 继承的一个例子

Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1.利用面向对象的写法,实现下面这个功能,实时更新数据的一个例子: 2.使用对上面类的继承,完成下面的效果: 好了,不多说,js的训练全靠敲,所以如果觉得面向对象不是很扎实,可以照着敲一个,如果觉得很扎实了,提供了效果图,可以自己写试试. 1.第一个效果图代码: [javascript] view pl

python -- 面向对象编程(继承、重写)

一.继承 子类可以继承父类的所有公有成员,但不能直接访问父类的私有成员,只能通过父类的公有方法间接访问私有属性或私有方法. 如: class DerviedClassName(BaseClassName1[,BaseClassName2,......]): 语句1 语句2 ....... 语句N 公有属性既可以在类的内部进行访问,也可以在外部程序中使用. 派生类(子类)继承了基类(父类)的行为和属性之后,还可以增加某些特定的行为和属性. 继承分为单继承和多继承 A.单继承 # ---------

Go语言学习(十三)面向对象编程-继承

1.匿名组合 Go语言也提供了继承,但是采用了组合的方式,所以我们将其称为匿名组合: package main import "fmt" //定义基类 type Base struct { Name string } //基类相关的2个成员方法 func (base *Base) A() { fmt.Println("Base method A called...") } func (base *Base) B() { fmt.Println("Base

面向对象编程——继承和多态(四)

在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base class.Super class). 比如我们已经编写了一个名为Animal的class,有一个run()方法可以直接打印: class Animal(object): def run(self): #为啥没有__init__,因为不需要初始化,就self一个参数. print("Animal is running.

Python 面向对象编程——继承和多态

1.1   继承和多态 1.1.1   继承 当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base class.Super class). >>> class Animal(object): ...    def run(self): ...        print('Animal is running...') #父类 ... >>> class Dog(Ani

面向对象编程--继承

一.子类的原型继承 -- 类式继承 // 声明父类 function SuperClass(){ this.superValue = true } //为父类添加共有方法 SuperClass.prototype.getSuperValue = function(){ return this.superValue } //声明子类 function SubClass(){ this.subValue = false; } //继承父类 subClass.prototype = new Super

面向对象编程-继承实例

1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 # Author:James Tao 4 5 class School(object): 6 def __init__(self,name,addr): 7 self.name=name 8 self.addr=addr 9 self.students=[] 10 self.teachers=[] 11 12 def enroll(self,stu_obj): 13 print('为学员%s办理