ExtJS之面向对象编程基本知识

ExtJS之面向对象编程基本知识

1：支持命名空间  

    < script type = " text/javascript " >
        // 定义一个命名空间
        Ext.namespace("Ext.wentao");
        // 在命名空间上定义一个类
        Ext.wentao.helloworld = Ext.emptyFn;
        // 创建一个类的实例
        new Ext.wentao.helloworld();    
    </ script >

 其中

    Ext.wentao.helloworld  =  Ext.emptyFn;

等价于   

    Ext.wentao.helloworld  =  function() {} ;

 

2：支持类实例属性  

    < script type = " text/javascript " >
        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类

        // 为自定义的类 增加一个 name 属性，并赋值
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛"
        });

        var _person = new Ext.wentao.Person();// 实例化 自定义类
        alert(_person.name);
        _person.name = "张三";// 修改类name属性
        alert(_person.name);

    </ script >

 

 
3：支持类实例方法   

    < script type = " text/javascript " >
        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛",
            sex : "男",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });

        var _person = new Ext.wentao.Person();// 实例化 自定义类
        _person.print();

    </ script >

 

4：支持类静态方法   

< script type = " text/javascript " >

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间
        Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            name : "刘文涛",
            sex : "男",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });

        // 演示 类静态方法
        Ext.wentao.Person.print = function(_name, _sex) {
            var _person = new Ext.wentao.Person();
            _person.name = _name;
            _person.sex = _sex;
            _person.print(); // 此处调用类 实例方法，上面print是类 静态方法
        };

        Ext.wentao.Person.print("张三", "女"); // 调用类 静态方法

    </ script >

 

5：支持构造方法   

< script type = " text/javascript " >
        Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间

     // 构造方法
        Ext.wentao.Person  =  function(_cfg) {
            Ext.apply( this ,_cfg);
        };

     // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype,  {
            print:function() {
                alert(String.format( " 姓名:{0},性别:{1} " , this .name, this .sex));
            }
        } );
    
     // 演示 类静态方法
        Ext.wentao.Person.print  =  function(_name,_sex) {
            var _person  =   new  Ext.wentao.Person( {name:_name,sex:_sex} );
            _person.print();  // 此处调用类 实例方法，上面print是类 静态方法
        };

    Ext.wentao.Person.print( " 张三 " , " 女 " );  // 调用类 静态方法
    </ script >

 

6：支持类继承   

< script type = " text/javascript " >

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

// *******************父类*********************
        // 构造方法
        Ext.wentao.Person = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            job : "无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                    this.sex, this.job));
            }
        });    

// *******************子类1*********************
        Ext.wentao.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        Ext.extend(Ext.wentao.Student, Ext.wentao.Person, {
            job : "学生"
        });

        var _student = new Ext.wentao.Student({
            name : "张三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

</ script >

 

7：支持类实例方法重写   

    < script type = " text/javascript " >     

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

// *******************父类*********************
        // 构造方法
        Ext.wentao.Person = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 演示类实例方法
        Ext.apply(Ext.wentao.Person.prototype, {
            job : "无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                    this.sex, this.job));
                }
        });

// *******************子类1*********************
        Ext.wentao.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 重写父类的 实例 方法
        Ext.extend(Ext.wentao.Student, Ext.wentao.Person, {
            job : "学生",
            print : function() {
                alert(String.format("{0}是一位{1}{2}", this.name, this.sex,
                    this.job));
            }
        });

        var _student = new Ext.wentao.Student({
            name : "张三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

    </ script >

 

8：支持命名空间别名   

    < script type = " text/javascript " >

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

        Wt = Ext.wentao; // 命名空间的别名

// *******************父类*********************
        // 构造方法
        Wt.Person = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 演示类实例方法
        Ext.apply(Wt.Person.prototype, {
            job : "无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                     this.sex, this.job));
            }
        });

// *******************子类1*********************
        Wt.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        // 重写父类的 实例 方法
        Ext.extend(Wt.Student, Ext.wentao.Person, {
            job : "学生",
            print : function() {
            alert(String.format("{0}是一位{1}{2}", this.name, this.sex,
                     this.job));
            }
        });

        var _student = new Wt.Student({
            name : "张q三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

    </ script >

 

9：支持类别名  

< script type = " text/javascript " >

        Ext.namespace("Ext.wentao"); // 自定义一个命名空间

        Wt = Ext.wentao; // 命名空间的别名

// *******************父类*********************
        // 构造方法
        Wt.Person = function(_cfg) {
             Ext.apply(this, _cfg);
        };

        PN = Wt.Person; // 类别名

        // 演示类实例方法
        Ext.apply(PN.prototype, {
            job : "无",
            print : function() {
            alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
                    this.sex, this.job));
            }
        });

// *******************子类1*********************
        Wt.Student = function(_cfg) {
            Ext.apply(this, _cfg);
        };

        ST = Wt.Student;

        // 重写父类的 实例 方法
        Ext.extend(ST, PN, {
            job : "学生",
            print : function() {
                alert(String.format("{0}是一位{1}{2}", this.name, this.sex,
                     this.job));
            }
        });

        var _student = new ST({
            name : "张q三",
            sex : "女"
        });
        _student.print(); // 调用 父类方法

    </ script >