ExtJS学习之一

本系列文档是基于本人在听取别人视频教程的基础上整理的。

 

开发时，在web页面中必须包含的文件：

resources/css/ext-all.css;adapter/ext/ext-base.js;ext-all.js，用户可以将下载的ExtJS库全部加到web工程中。

 

下面先讲述一下ExtJs支持的一些面向对象的特性。

1、ExtJs支持命名空间，类似Java中package的概念。

Ext.namespace(“Ext.sigsit.platform”);

Ext.sigsit.platform.HelloWorld=Ext.emptyFn;(等价于function(){})

 

2、类实例属性：对于一个实例的特征描述

举例：Ext.apply(Ext.sigsit.Person.prototype,{name:”helen”}),类似Java中的setter方法

Ext.apply方法的主要用能是将后面对象的内容，附加给前面的对象。

实例方法：定义一个对象所能具有的功能和动作，类似Java中的类中的每个方法

print:function(){

              alert(String.format(“姓名：{0}，性别：（1）”，this.name,this.sex));

}

 

3、类静态方法：在一个类级别上共享的方法。

Ext.sigsit.Person.print=function(name,sex){

    var person=new Ext.sigsit.Person();

    person.name=name;

    alert(String.format("姓名：{0}", person.name));

}

 

4、构造方法：在初始化一个对象的同时指定的方法，类似Java中带参数的构造方法

Ext.sigsit.Person=function(config){

    Ext.apply(this,config);

}

使用举例：var person = new Ext.sigsit.Person({name:"helen"});

 

5、支持类继承：对于类的一种扩展形式，类似Java中类的继承

Ext.extend(Ext.sigsit.Student,Ext.sigsit.Person,{role:"学生"});

 

6、类实例方法重写：子类在继承父类时对其已经存在的方法进行重新定义

//继承父类，重写父类的方法

Ext.extend(Ext.sigsit.Student,Ext.sigsit.Person,{

    print:function(){

       alert(String.format("{0}是一位学生",this.name));

    }

});

 

7、支持命名空间别名：对于命名空间的别称。（别称的首字母必须大写，其后的字母小写）

Dc=Ext.sigsit;可以利用别名代替命名空间

 

8、类别名：对于类的别名，整个类的别名必须大写，用于区别命名空间别名

//类别名

ST=Ext.sigsit.Student;

 

9、支持事件：对于外界影响的反应，在ExtJs中还支持时间队列模式，由Ext.util.Observable类支持。支持一个事件可以被订阅多次。

//定义事件

Ext.sigsit.Person = function(){

    this.addEvents("namechange");

}

 

//发布事件

Ext.extend(Ext.sigsit.Person,Ext.util.Observable,{

    name:"",

    setName:function(_name){

       if(this.name!=_name){

           this.fireEvent("namechange",this,this.name,_name);

           this.name=_name;

       }

    }

})

 

//订阅事件，即如何触发使用事件

    var person = null;

   

    Ext.onReady(function(){

       person = new Ext.sigsit.Person();

       var name=Ext.get("username");

       person.on("namechange",function(person,_old,_new){

           name.dom.value=_new;

       }

       )

    }

   

    function buttonClick(){

       person.setName("helen");//触发事件

    )