Thinking in ExtJs 面向对象思想(3)

bingyu

浏览: 42146 次
性别:
来自: 广州

最近访客更多访客>>

caijunjie1987

intein8

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT prototype 脚本

五：支持事件队列

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;
 })
 });

可以看到页面上必须有两个元素和一个按钮。下面是页面元素的代码。

当点击按钮时，将调用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)
 })

那么它只接收一个值，并且能做一些其他相应的事件。

好了，就这么简单。

分享到：

Oracle备份与恢复(一) | Thinking in ExtJs 面向对象思想(2)

2010-08-13 23:03
浏览 901
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论