当前位置: 代码迷 >> JavaScript >> ExtJs在面向对象所做出的努力(2)
  详细解决方案

ExtJs在面向对象所做出的努力(2)

热度:201   发布时间:2012-10-12 10:17:04.0
ExtJs在面向对象所作出的努力(2)

取自dojochina视频教程PPT

?

ExtJs在面向对象所作出的努力(2)

命名空间别名

定义:对于命名空间的别称

代码举例:Dc = Ext.dojochina;

规范:首字母大写

?

?

类别名

定义:对于类的别称

代码举例:

PN = Ext.dojochina.Person;

规范:全部字母大写

?

支持事件队列

事件

定义:对于外界影响的反应,在ExtJs还支持事件队列模式.由Ext.util.Observable类支持

person.js

Ext.namespace("Ext.dojochina");

Ext.dojochina.Person = function(){

	this.addEvent(
		"namechange",   //定义
		"sexchange"
	);
};

Ext.extend(Ext.dojochina.Person,
	   Ext.util.Observable,{
	   name:"",
	   sex:"",
	   setName:function(_name){
		if(this.name != _name){
			this.fireEvent("namechange",this,this.name,_name);   //发布
			this.name = _name;
		}
	   },
	   setSex:function(_sex){
		if(this.sex != _sex){
			this.fireEvent("sexchange",this,this.sex,_sex);
			this.sex = _sex;
		}
	   }
	});
通过addEvent定义事件,在函数中通过fireEvent发布事件

?

Person.html部分代码

var _person = null;

button_click = function(){
	_person.setName(prompt("请输入姓名:",""));  
	_person.serSex(prompt("请输入性别",""));
}

Ext.onReady(function(){
	var txt_name = Ext.get("txt_name");   //获得页面空间
	
	vat txt_sex = Ext.get("txt_sex");

	_person = new Ext.dojochina.Person();
	_person.on("namechange",function(_person,_old,_new){
					txt_name.dom.value = _new;
				});   //注册
	_person.on("sexchange",function(_person,_old,_new){
					txt_sex.dom.value = _new;
				});
	_person.on("namechange",function(_person,_old,_new){
					document.title = _new;
				});

})
?

ExtJS的另外几种面向对象设计体现

GWT-EXT为Java程序员编写EXTJS的应用提供了可能(java程序员编写GWT代码,通过解释器生成javascript代码)

?

EXTTLD为JSP程序员的标签化部署EXTJS提供了可能

?

EXTSharp为C#程序员编写EXTJS的应用提供了可能

?

  相关解决方案