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)