本系列文档是基于本人在听取别人视频教程的基础上整理的。
开发时,在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");//触发事件
)