ExtJS4学习札记七－－事件绑定相关

ExtJS4学习笔记七－－事件绑定相关
一、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('发生了自定义事件');});

<input type='button' value='say' onclick='per.say()'>

自定义事件的另外一个例子：

//继承自Ext.util.Observablevar 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('服务员开始收拾盘子。');});

<input type='button' value='员工吃饭' onclick='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);//绑定处理函数

查看更多 下一篇