Extjs面向对象设计

声明：

   ①学习时Extjs版本3.2.0,

   ②引用ExtJs代码：

<link rel="stylesheet" type="text/css" href="../../ext-3.2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-3.2.0/ext-all.js"></script>

 

 

面向对象设计一般主要有以下一些方面：①属性②方法③构造方法④继承⑤事件.先看个示例：

Person = function(_cfg){
       Ext.apply(this,_cfg);
}

 以上代码定义一个空的Person类，并实现构造方法。

Ext.apply(Person.prototype,{
     name:"",
     sex:"",
     printf:function(){
           alert(String.format("姓名:{0},性别:{1}",this.name,this,sex););
    }
});

 

以上代码是给Person类增加两个属性及一个方法。这种添加属性方法的写法叫做"标量写法",Json格式,代码简练且方便。

Ext.onReady(function(){
	//创建一个Person类的实例
	var _person = new Person();
	_person.name="余雅娜";
	_person.sex="女";
	_person.printf();
	
	var _person_ = new Person({name:"李志文",sex:"男"});
	_person_.printf();
});

 

以上代码实现了两种方式创建了两个Person对象,并调用printf方法来输出。

Student = function(_cfg){
	Ext.apply(this,_cfg);
}
Ext.extend(Student,Person,{
	name:"学生",
	sex:"",
	printf:function(){
		alert(String.format("我是一个学生,名字:{0},性别:{1}",this.name,this.sex));
	}
});

 

以上代码创建一个有构造参数的Student类,它继承了Person类,并重写了父类的属性方法。这里的继承,可以扩展属性及方法等。

 

到目前为止,已经学习了ExtJs的属性、方法、构造方法、继承。下面根据继承,说下事件.

Teacher = function(_cfg){
	this.addEvents("namechange","sexchange");
}

Ext.extend(Teacher,Ext.util.Observable,{
	name:"",
	sex:"",
	setName:function(_name){
		if(this.name != _name){
			//触发namechange事件
			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;
		}
	}
});



Ext.onReady(function(){
	var _teacher = new Teacher();
	_teacher.on("namechange",function(_teacher,_old,_new){
		alert(String.format("老师的姓名改变了,由原来的:{0}变为了:{1}",_old,_new));
	});
	_teacher.on("sexchange",function(_teacher,_old,_new){
		alert(String.format("老师的性别改变了,由原来的:{0}变为了:{1}",_old,_new));
	})
	_teacher.setName(prompt("请输入老师姓名",""));
	_teacher.setSex(prompt("请输入老师性别",""));
});

 以上代码创建了一个Teacher类,并给它添加了namechange,sexchange两个事件，这两个事件会分别在name/sex改变的时候触发。在实际调用的时候,创建_teacher对象,并添加监听,以及事件触发时的响应函数.

 

关于命名空间,Ext.namespace("Ext.test");不知道怎么回事,创建类Ext.test.Person时,调用老是报错,请拍砖指教！