ExtJs中继承机制和窗体创建（精品）

一、JS语言创建类操作

类的声明其实就是一个function函数

a)        声明共有的属性

This.name=’marcio’;  初始化变量   代表java中的public

b)       声明私有的属性

Var email=’marcio_zhang@163.com’;  声明一个私有变量，相当于java中的private

c)        创建方法

This.getEmail=function(){

       Return email;

}

声明了方法，并且是共有的方法。

d)       实例化对象，并调用测试

Var u=newuser(); 

利用new关键字来实例化对象

Alert(u.name);alert(u.getEamil);

              利用加点调用public属性和方法，也可以用[]来访问属性 u[‘name’]

       与Json格式对象的区别，Json声明对象是直接创建出这个对象，不用实例化，格式为：

       Varuser={name:’marcio’,age:’21’};而用function是声明类，与java中一样。需要实例化并调用其中的共有属性和方法。

二、创建一个ext窗体，并调用按钮事件来显示

a)        创建一个窗体，用new字段来创建

var win=newExt.window.Window({

               width:400,

               height:300,

               title:'marico'

    });

b)       在页面中加入button标签并指定id为btn

<button id=”btn”>显示</button>

c)        得到按钮的dom对象，添加事件，在单击的时候调用win对象的show()方法来显示窗体

           Ext.get("btn").on("click",function(){

               win.show();

    }

三、简述别名的机制，ext的create方法就是一个别名

a)        定义一个对象，并声明方法

    var o={

           say:function(){

              alert('marcio');

           }

}

o.say();调用ext的alis方法使用别名

 

b)       调用Ext中的alias方法为say方法赋值为别名

Var fn=Ext.Function.alias(o,’say’);

第一个参数指明类名，第二个是方法名， 返回的是fn的别名的方法

c)        调用fn方法  效果一直   fn();

四、利用create方法创建窗口对象，4.0推荐使用create，与new意思一样。

var win= Ext.create(‘Ext.window.Window’,{

               width:400,

               height:300,

               title:'marico'

    });

       Win.

show();

五、利用Ext中的define方法继承于类。

a)        首先利用extend关键字继承它，并且给它赋值参数。

Ext.define("mywin",{

           extend:"Ext.window.Window",

           width:400,

           height:300,

           title:'marico',

       //构造方法

           initComponent:function(){

              this.callParent(arguments);

           }

       });

       var win=Ext.create("mywin",{

          

       }).show();

b)       扩展它的属性和函数

newtitle:'zhang',

           mySetTitle:function(){

              this.title=this.newtitle;

           }

直接用新的关键字加入方法和类。

 

c)        利用继承还实现开发的标准。

首先先继承于窗口这个的这个类，放到一个js文件中并导入在页面中，在方法中

直接实例化这个类就可以使用，干净化组件，使功能特别强大。做业务的时候可以引入定好的组件来处理、效果代码如下： 

Ext.onReady(function(){

     var win=Ext.create("mywin",{

     }).show();

  });

       发现开发缺点并解决这个问题。因为在开发中如果组件多了，不可能在页面中全部引入,特别耗费资源。

解决方法：

    首先声明命名空间。

Ext.Loader.setConfig({

       enabled:true,

       paths:{

           //目录

           myApp:'js'

       }

    });

    在create参数中指定requires关键字的值来引入指定的类

   

    Ext.onReady(function(){

       var win=Ext.create("mywin",{

           requires:['myApp.mywin']

       }).show();

    });

这样就能很好的解决加入很多自定义的js文件，来实例化窗口对象。

 

 

d)      利用Ext中的difine方法和mixins关键字来实现类的多继承机制

由于extend关键字只能继承于一个指定的类，而mixins关键字可以混合的继承很多类。

首先声明两个类：

    Ext.define("say",{

       cansay:function(){

           alert("I cansay");

       }

    });

    Ext.define("sing",{

       cansing:function(){

           alert("I cansing");

       }

    });

继承代码：

    Ext.define("user",{

       mixins:{

           say:'say',

           sing:'sing'

       }

    });

实例化对象测试： var u=Ext.create("user",{});

    u.cansay();

    u.cansing();