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 >

[转自] ExtJS在面向对象所作出的努力

java lover