事件绑定相关的方法:
一、使用addListener()方法
var button = Ext.get('btn'); button.addListener('click',hello1);//绑定事件处理函数 button.addListener('click',hello2);
二、ExtJS支持的自定义事件
//创建Person类 var Person = Ext.extend(Ext.util.Observable,{ constructor : function(name){ this.name = name; this.sayNum = 0; this.say = function(){ if(this.sayNum < 2){ this.sayNum += 1; alert('I am '+name); }else{ this.sayNum = 0;//触发自定义事件后计数器归零 this.fireEvent('onSay',this);//激发自定义事件 } } this.addEvents({//加入自定义事件 "onSay" : true }); } }); var per = new Person('tom',3);//创建对象 //为自定义事件绑定处理函数 per.addListener('onSay',function handler(){ alert('发生了自定义事件'); });
HTML代码如下:
<input type='button' value='say' οnclick='per.say()'>
自定义事件的另一个例子:
//继承自Ext.util.Observable var Person = Ext.extend(Ext.util.Observable,{ constructor : function(name){ this.name = name; this.say = function(){ this.fireEvent('onSay',this.name);//激发自定义事件 } this.addEvents({//加入自定义事件 "onSay" : true }); } }); var per = new Person('tom');//创建对象 //为自定义事件绑定处理函数 per.addListener('onSay',function(name){ alert("I'am " + name); });
拦截器使用示例Observable.capture,与上面例子不同的地方是“var per = new Person('tom');//创建对象”代码之后的内容替换为:
per.addListener('onSay',handler);//为自定义事件绑定处理函数 function handler(){//事件处理函数 alert('发生了自定义事件'); } //为per对象添加拦截器 Ext.util.Observable.capture(per,captureFunction); //拦截函数 function captureFunction(eventName){ if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行 alert("拦截事件:“"+eventName+"”。"); return false; } return true; }
三、addManagedListener受管事件监听器:
function createFn(){ alert('新建'); } function openFn(){ alert('打开'); } function saveFn(){ alert('保存'); } Ext.create('Ext.toolbar.Toolbar',{//创建工具栏 renderTo: Ext.getBody(), bodyPadding: 5, width:300, items : [ {text:'新建',id:'createBtn',iconCls:'newIcon'}, {text:'打开',id:'openBtn',iconCls:'openIcon'}, {text:'保存',id:'saveBtn',iconCls:'saveIcon'}, {text:'销毁新建按钮',handler : function(){ //销毁新建按钮 Ext.getCmp('createBtn').destroy(); }} ] }); var createBtn = Ext.getCmp('createBtn'); createBtn.on('click',createFn); //以下的事件绑定将受createBtn组件是否销毁的控制,如果createBtn组件销毁 //了则事件绑定同时解除。 createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn); createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);
四、relayEvents传播分发事件:
//创建Employee工人类 var Employee = Ext.extend(Ext.util.Observable,{ constructor : function(config){ this.name = config.name; this.eat = function(){ this.fireEvent('startEat',this);//激发开始吃饭事件 this.fireEvent('finishEat',this);//激发结束吃饭事件 } this.addEvents({//加入自定义事件 "startEat" : true,//开始吃饭事件 "finishEat" : true//结束吃饭事件 }); Employee.superclass.constructor.call(this, config) } }); //定义Waiter服务员类 var Waiter = Ext.extend(Ext.util.Observable,{ constructor : function(config){ Waiter.superclass.constructor.call(this, config); } }); //创建员工对象 var emp = new Employee({name:'tom'}); //为自定义事件绑定处理函数 emp.addListener('startEat',function(){ alert(this.name + '开始吃饭了。'); }); emp.addListener('finishEat',function (){ alert(this.name + '吃完饭,可以收拾盘子了。'); }); //创建服务员对象 var waiter = new Waiter(); //使服务员对象与员工对象的finishEat事件进行关联 //也就是说当员工对象的finishEat事件发生后,先执行自身的事件监听器, //然后事件会传递到服务员对象中,激发服务员对象的finishEat事件。 waiter.relayEvents(emp, ['finishEat']); waiter.on('finishEat',function(){ alert('服务员开始收拾盘子。'); });
HTML代码:
<input type='button' value='员工吃饭' οnclick='emp.eat()'>
五、Ext.EventObject示例:
var btn = Ext.get('buttonTest'); btn.addListener('click',handler);//为click事件绑定处理函数 function handler(e){//事件处理函数 //获取事件发生时的x坐标 var x = e.getPageX(); //获取事件发生时的y坐标 var y = e.getPageY(); var msg = '事件发生坐标 : x='+x+' y='+y; alert(Ext.EventManager.getPageXY(e)); alert(msg); }
六、Ext.EventManager使用:
Ext.EventManager.addListener('btn','click',handler);//绑定处理函数