Thinking in ExtJs 面向对象思想(3)
五：支持事件队列
Ext支持事件队列，由Ext.util.Observable来进行实现。
修改ext-bingyu.js的代码。主要是修改
Ext.bingyu.Person类
Ext.bingyu.Person = function(_cfg){
Ext.apply(this,_cfg);
this.addEvents(
'nameChange',
'sexChange'
);
};
可以看到，现在它绑定了两个事件。
然后将Person类继承Observable类，说明在什么情况下会触发这两个事件。就是当改变名字或性别时将触发相应的事件。
Ext.extend(Ext.bingyu.Person,Ext.util.Observable,{
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;
}
}
});
修改后的ext-bingyu的完整代码如下：
//定义命名空间
Ext.namespace("Ext.bingyu");
//定义一个类
Ext.bingyu.Person = function(_cfg){
Ext.apply(this,_cfg);
this.addEvents(
'nameChange',
'sexChange'
);
};
//添加类的原型
Ext.apply(Ext.bingyu.Person.prototype,{
//类实例方法
say:function(){
return String.format("姓名：{0},性别:{1}",this.name,this.sex);
}
});
//添加类的静态方法
Ext.bingyu.Person.say = function(_name,_sex){
var _person = new Ext.bingyu.Person({name:_name,sex:_sex});
return _person.say();
};
Ext.extend(Ext.bingyu.Person,Ext.util.Observable,{
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.bingyu.shengFen = function(_cfg){
Ext.apply(this,_cfg);
};
//继承Person并添加新的属性和重写方法
Ext.extend(Ext.bingyu.shengFen,
Ext.bingyu.Person,{
job:'软件工程师',
say:function(){
return String.format("{0}是一个{1}",this.name,this.job);
}
});
那么如何触发这些事件呢。页面的js脚本如下：
var _person = null;
button_click = function(){
_person.setName(prompt("input name:",""));
_person.setSex(prompt("input sex:",""));
//_person.setName("hehe");
//_person.setSex("haha");
}
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='ext-2.1/resources/images/default/s.gif';
Ext.QuickTips.init();
//事件队列
var txt_name = Ext.get("txt_name");
var txt_sex = Ext.get("txt_sex");
_person = new Ext.bingyu.Person({name:'nameOld',sex:'sexOld'});
alert("旧的名字："+_person.name+" 旧的性别:"+_person.sex);
_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;
})
});
可以看到页面上必须有两个元素和一个按钮。下面是页面元素的代码。
<body style=”margin=20 10 50 20;”>
姓名：<input type=”text” id=”txt_name” maxLength=”10″/><br>
性别：<input type=”text” id=”txt_sex” maxLength=”10″/><br>
<input type=”button” value=”输入” onclick=”button_click()”>
</body>
当点击按钮时，将调用button_click函数，里面调用了setName和setSex两个方法，并各为它们传入一个参数，就是新的值。这 时，ext-bingyu中的这两个方法分别会去判断传入的值和以前的值是否是一样的，如果前后两个值是不一样的，它将触发nameChange和 sexChange事件。
然后由this.fireEvent(“nameChange”,this,this.name,_name);知道，
它将抛出三个值，这三个值是要传递给页面的。
然后，由this.name = _name;知道，它将给自己设置新的值。
现在回到页面，页面上已经接收了三个值，它可以用它们来做任何事情，第一个事件绑定中，我们改变了页面上id为txt_name的值。第二个事件同 理。第三个事件我们改变了文档的标题。当然，页面也可以不接收它抛出的所有值，比如修改第三个事件绑定函数：
将
_person.on("nameChange",function(_person,_old,_new){
document.title = _new;
改为
_person.on("nameChange",function(_person){
alert("old:"+_person.name)
})
那么它只接收一个值，并且能做一些其他相应的事件。
好了，就这么简单。