extjs的自定义事件主要分三步
1.在类中定义事件名称:
Person = function(config) {
Person.superclass.constructor.call(this, config);
this.name = config.name || '';
this.sex = config.sex || '';
this.addEvents({
"nameChange": true,
"sexChange": true
});
};
2.实例化对象,并在该对象中定义事件的监听函数
var person = new Person({
name: 'binoruv',
sex: 'man'
});
person.on("nameChange", function() { alert("Name has been changed to " + this.name); });
person.on("sexChange", function() { alert("Sex has been changed to " + this.sex); });
3.触发事件
Ext.extend(Person, Ext.util.Observable, {
//extend函数中可以自定义新的方法,也可以重写原类的方法
setName: function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent("nameChange", this);
}
},
setSex: function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent("sexChange", this);
}
}
});
person.setName("binoruv");
person.setSex("woman");
整个代码如下:
<script type="text/javascript">
Person = function(config) {
/*
此处addEvents是调用Person父类Ext.util.Observable的方法
api中对Observable的描述:一个抽象基类(Abstract base class),为事件
机制的管理提供一个公共接口。子类应有一个"events"属性来
定义所有的事件。
*/
Person.superclass.constructor.call(this, config);
this.name = config.name || '';
this.sex = config.sex || '';
this.addEvents({
"nameChange": true,
"sexChange": true
});
};
Ext.extend(Person, Ext.util.Observable, {
setName : function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent("nameChange", this);
}
},
setSex : function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent("sexChange", this);
}
}
});
Ext.onReady(function() {
var person = new Person({
name: 'binoruv',
sex: 'Man'
});
person.on("nameChange", function() { /*debugger;*/Ext.Msg.alert("Message","Name has been changed to " + this.name); });
person.on("sexChange", function() { /*debugger;*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex); });
person.setName("binoruv");
person.setSex("Woman");
});
</script>
1. 处理HTML元素的标准事件
HTML元素的标准事件是指mouseover、mousedown、click、 blur、focus、change等。在ExtJS中,这些事件的处理如下:
注册一个事件处理函数使用: Ext.get('myElement').on('click', myHandler, myScope) myElement是要注册的元素的ID,click是事件的名称(注意,和HTML元素中的声明onXXX不同,这里不需要on),myHandler 是处理函数的函数名称,myScope是一个可选的参数,指定处理函数绑定的对象,也就是处理函数的作用域,如果不提供这个参数,则是默认的 window。
撤销一个事件处理函数: Ext.get('myElement').un('click', myHandler, myScope) 参数的意义同上。
ExtJS 会根据不同的浏览器进行相应的处理,支持多浏览器。事件处理函数的参数只能参考ExtJS的文档了,必要时还得参考源代码。
2. 处理自定义事件
在ExtJS中使用自定义事件,需要从Ext.util.Observable继承,示例代码如下:
Employee = function(name){
this.name = name;
this.addEvents({
"fired" : true,
"quit" : true
});
}
Ext.extend(Employee, Ext.util.Observable, { ... });
在这段代码中,定义了一个Employee类,定义了fired和quit两个事件。如何触发这两个事件呢,基类 Ext.util.Observable提供了触发自定义事件的方法fireEvent(eventName, arg1, arg2, ... argn), eventName是要触发的时间的名称(不区分大小写),后面的参数arg1,arg2等是要传给事件处理函数的参数。用上面的Employee类做示例,触发quit事件:
this.fireEvent('quit', this);
这行代码将触发quit事件,并将Empolyee类的实例传给quit事件的处理函数,quit事件的订阅可以采用如下代码:
function myHandler1(empolyee){ ... }
function myHandler2(empolyee){ ... }
var emp = new Empolyee('tom');
emp.on('quit', myHandler1);
emp.on('quit', myHandler2);
在上面的代码中,为quit事件注册了两个处理函数(myHandler1与myHandler),当quit事件被激发时,将会依次调用 myHandler1和myHandler2两个函数。
值得注意的是,不管是HTML元素的标准事件还是自定义事件,如果为某个时间注册了多个处理函数,如前面的例子,如果myHandler1返回 false的话,则会取消在myHandler1之后注册的处理函数的执行,即该事件被取消,从而停止继续执行该事件的处理函数,而这个返回值false 会作为事件激发的结果,返回给empolyee,即:
var result = this.fireEvent('quit', this);
if (result === false) {
alert('event canceled'); //这里表示事件被某个处理函数取消
}
else {
alert('event complete'); // 这里表示事件执行完毕
}
通过Ext的自定义事件的机制,可以实现一对多的观察者模式,也可以实现一对一的绑定模式,这一点,在ExtJS的开发中是很重要的。
分享到:
相关推荐
ExtJs自定义消息框,自带的消息框,可以下载来了解一下。
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
自定义下拉树,你懂的,内附图和前后台源代码
extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证
自定义树结构实现以及动态表头实现,整个程序是完整的,包括后台数据读取,数据赋值,树结构的类定义,前后端函数映射实现等,前端运用Extjs搭建页面
自定义高级查询Extjs
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext....
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
TreeField: 扩展ExtJs4的Ext.form.field.Picker类,当点击下拉框时,异步加载树形结构数据的所有层级,需要后台提供树形结构数据,同时提供当树形列表选择改变后(selectionchange)等自定义事件,和是否为多选,父...
Extjs4.2自定义ComboTree
该联想功能下拉框就是具有像百度和google搜索框一样的联想功能。
测试EXTJS4中的特性:config, extend, statics, mixins。 测试EXTJS自定义事件:当恐怖分子(Terrorist)在火车站掏刀时,触发一个砍人事件。警察将抓捕他。 群众(Person)看到砍人吓坏了。
主要通过代码实例说明了ExtJS如何自定义主题(theme)样式,希望对大家有帮助
xtype : 'jxmonthfield' ...//公共事件 select:function(JXMonthField this, Array dates),当选定某些时间值(点击“确定”)时触发,传入参数:this,控件本身,dates,所选中的时间对象数组(不论是否支持多选)
Extjs4.2 设置tabpanel当前活动页签的样式
之前项目使用的一个深蓝色主题,继承自extjs4原生classic主题。 先引入ext-ux-all.css,再引入fixed.css