五:支持事件队列
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)
})
那么它只接收一个值,并且能做一些其他相应的事件。
好了,就这么简单。
分享到:
相关推荐
面向对象编程是一种程序设计思想,其核心在于将数据和操作数据的方法封装在一起形成类,然后通过实例化类得到对象。这种方式有助于提高代码的复用性、可维护性和扩展性。在JavaScript这样的动态类型语言中,尽管没有...
"ExtJS培训sample_for面向对象设计"这个主题主要聚焦于如何在ExtJS中应用面向对象的设计原则和模式。 在面向对象设计中,有四个核心概念:封装、继承、多态和抽象。这些概念同样适用于JavaScript,因为JavaScript是...
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
ExtJs In action 2009,直击Extjs3.0,不可多得的In Action系列学习Extjs的书籍
本篇文章将探讨EXTJS框架中的面向对象机制,特别是继承的概念,以及如何在实际开发中应用这些概念。 EXTJS是一个强大的JavaScript库,它提供了丰富的UI组件和数据绑定功能,适用于构建复杂的Web应用程序。在EXTJS中...
如果你读过extjs的原代码,一定知道它是基于面向对象思想代码。该代码不同于extjs,更加合理且容易理解。
Extjs支持面向对象编程,其对象模型包括: - 类的定义(Ext.extend) - 对象实例化(通过new关键字) - 原型链继承(JavaScript的继承机制) - 类的配置选项和方法(config选项) #### 4. 消息框的使用 Extjs提供...
ExtJs学习资料14-OOP[JavaScript面向对象编程]
ExtJs2.0学习系列(1)--Ext.MessageBox
EXTJS 面向对象编程教程 EXTJS 是一个基于 JavaScript 的富客户端框架,它提供了强大的组件模型和面向对象的编程方式,使得开发者能够构建复杂的 Web 应用程序。面向对象编程(Object-Oriented Programming, OOP)...
课程简介: ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架,本...第十九讲.ExtJS之组件面向对象编程(一) 第二十讲.ExtJS之组件面向对象编程(二) 项目实战Extjs版在线选课系统:
extjs3中文手册 最新的extjs3版本的中文手册
### ExtJS.in.Action #### 知识点概览 1. **ExtJS框架介绍** - 架构设计原理 - 基础概念 - 事件处理机制 - 组件与容器 2. **ExtJS核心组件详解** - 组件的基本用法 - 组件组织管理 - 表单处理技术 3. **...
ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...
在源码中,你可以看到EXTJS的组件类体系,它采用了面向对象的编程思想,通过继承和混合(Mixins)机制实现组件的功能复用。例如,Panel组件可以看作是Container(容器)和Component(基本组件)的组合,具备了容器的...
extJs5 api part3
ExtJS 3.x系列引入了全新的布局管理器,提供更灵活的布局选项,如fit布局、border布局等,使得组件间的嵌套和空间分配更为便捷。同时,3.x版本增强了数据绑定和模型(Model)的概念,使得数据与视图之间的交互更加...