淘先锋技术网

首页 1 2 3 4 5 6 7

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

 

开发时,在web页面中必须包含的文件:

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

 

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

1ExtJs支持命名空间,类似Javapackage的概念。

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},性别:(1this.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");//触发事件

    )