EXT事件绑定，父级回调子级计算结果

2024-01-27 10:48
文章标签 绑定 事件 父级 ext 计算结果 调子

本文主要是介绍EXT事件绑定，父级回调子级计算结果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、addListener方法 
Javascript代码   收藏代码
  1. var button = Ext.get('btn');  
  2. button.addListener('click',hello1);//绑定事件处理函数  
  3. button.addListener('click',hello2);  


二、ExtJS支持的自定义事件 
Javascript代码   收藏代码
  1. //创建Person类  
  2. var Person = Ext.extend(Ext.util.Observable,{  
  3.     constructor : function(name){  
  4.        this.name = name;  
  5.        this.sayNum = 0;  
  6.        this.say = function(){  
  7.             if(this.sayNum < 2){  
  8.                 this.sayNum += 1;  
  9.                 alert('I am '+name);  
  10.             }else{  
  11.                 this.sayNum = 0;//触发自定义事件后计数器归零  
  12.                 this.fireEvent('onSay',this);//激发自定义事件  
  13.             }  
  14.        }  
  15.        this.addEvents({//加入自定义事件  
  16.           "onSay" : true  
  17.        });  
  18.     }  
  19. });  
  20. var per = new Person('tom',3);//创建对象  
  21. //为自定义事件绑定处理函数  
  22. per.addListener('onSay',function handler(){  
  23.     alert('发生了自定义事件');  
  24. });  
Html代码   收藏代码
  1. <input type='button' value='say' onclick='per.say()'>  

自定义事件的另外一个例子： 
Javascript代码   收藏代码
  1. //继承自Ext.util.Observable  
  2. var Person = Ext.extend(Ext.util.Observable,{  
  3.     constructor : function(name){  
  4.        this.name = name;  
  5.        this.say = function(){  
  6.             this.fireEvent('onSay',this.name);//激发自定义事件  
  7.        }  
  8.        this.addEvents({//加入自定义事件  
  9.           "onSay" : true  
  10.        });  
  11.     }  
  12. });  
  13. var per = new Person('tom');//创建对象  
  14.   
  15. //为自定义事件绑定处理函数  
  16. per.addListener('onSay',function(name){  
  17.     alert("I'am " + name);  
  18. });  

拦截器使用示例Observable.capture，与上面例子不同的地方是“var per = new Person('tom');//创建对象”代码之后的内容替换为： 
Javascript代码   收藏代码
  1. per.addListener('onSay',handler);//为自定义事件绑定处理函数  
  2. function handler(){//事件处理函数  
  3.     alert('发生了自定义事件');  
  4. }  
  5. //为per对象添加拦截器  
  6. Ext.util.Observable.capture(per,captureFunction);  
  7. //拦截函数  
  8. function captureFunction(eventName){  
  9.     if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行  
  10.         alert("拦截事件：“"+eventName+"”。");  
  11.         return false;  
  12.     }  
  13.     return true;  
  14. }  


三、addManagedListener受管事件监听器： 
Javascript代码   收藏代码
  1. function createFn(){  
  2.     alert('新建');  
  3. }  
  4. function openFn(){  
  5.     alert('打开');  
  6. }  
  7. function saveFn(){  
  8.     alert('保存');  
  9. }  
  10. Ext.create('Ext.toolbar.Toolbar',{//创建工具栏  
  11.     renderTo: Ext.getBody(),  
  12.     bodyPadding: 5,  
  13.     width:300,  
  14.     items : [  
  15.         {text:'新建',id:'createBtn',iconCls:'newIcon'},  
  16.         {text:'打开',id:'openBtn',iconCls:'openIcon'},  
  17.         {text:'保存',id:'saveBtn',iconCls:'saveIcon'},  
  18.         {text:'销毁新建按钮',handler : function(){  
  19.             //销毁新建按钮  
  20.             Ext.getCmp('createBtn').destroy();  
  21.         }}  
  22.     ]  
  23. });  
  24. var createBtn = Ext.getCmp('createBtn');  
  25. createBtn.on('click',createFn);  
  26. //以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁  
  27. //了则事件绑定同时解除。  
  28. createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);  
  29. createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);  


四、relayEvents传播分发事件： 
Javascript代码   收藏代码
  1. //创建Employee工人类  
  2. var Employee = Ext.extend(Ext.util.Observable,{  
  3.     constructor : function(config){  
  4.        this.name = config.name;  
  5.        this.eat = function(){  
  6.             this.fireEvent('startEat',this);//激发开始吃饭事件  
  7.             this.fireEvent('finishEat',this);//激发结束吃饭事件  
  8.        }  
  9.        this.addEvents({//加入自定义事件  
  10.           "startEat" : true,//开始吃饭事件  
  11.           "finishEat" : true//结束吃饭事件  
  12.        });  
  13.        Employee.superclass.constructor.call(this, config)  
  14.     }  
  15. });  
  16.   
  17. //定义Waiter服务员类  
  18. var Waiter = Ext.extend(Ext.util.Observable,{  
  19.     constructor : function(config){  
  20.         Waiter.superclass.constructor.call(this, config);  
  21.     }  
  22. });  
  23. //创建员工对象  
  24. var emp = new Employee({name:'tom'});  
  25. //为自定义事件绑定处理函数  
  26. emp.addListener('startEat',function(){  
  27.     alert(this.name + '开始吃饭了。');  
  28. });  
  29. emp.addListener('finishEat',function (){  
  30.     alert(this.name + '吃完饭，可以收拾盘子了。');  
  31. });  
  32. //创建服务员对象  
  33. var waiter = new Waiter();  
  34. //使服务员对象与员工对象的finishEat事件进行关联  
  35. //也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，  
  36. //然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。  
  37. waiter.relayEvents(emp, ['finishEat']);  
  38. waiter.on('finishEat',function(){  
  39.     alert('服务员开始收拾盘子。');  
  40. });  
Html代码   收藏代码
  1. <input type='button' value='员工吃饭' onclick='emp.eat()'>  


五、Ext.EventObject示例 
Javascript代码   收藏代码
  1. var btn = Ext.get('buttonTest');  
  2. btn.addListener('click',handler);//为click事件绑定处理函数  
  3. function handler(e){//事件处理函数  
  4.     //获取事件发生时的x坐标  
  5.     var x = e.getPageX();  
  6.     //获取事件发生时的y坐标  
  7.     var y = e.getPageY();  
  8.     var msg = '事件发生坐标 : x='+x+' y='+y;  
  9.     alert(Ext.EventManager.getPageXY(e));  
  10.     alert(msg);  
  11. }  


六、Ext.EventManager使用 
Javascript代码   收藏代码
  1. Ext.EventManager.addListener('btn','click',handler);//绑定处理函数  

这篇关于EXT事件绑定，父级回调子级计算结果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/650013。

相关文章

禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...
SpringMVC入参绑定特别注意

SpringMVC入参绑定特别注意

1.直接在controller中定义一个变量，但是此种传输方式有一个限制就是参数名和请求中的参数名必须保持一致，否则失效。 @RequestMapping("test2")@ResponseBodypublic DBHackResponse<UserInfoVo> test2(String id , String name){UserInfoVo userInfoVo = new UserInf
阅读更多...
Maven(插件配置和生命周期的绑定)

Maven(插件配置和生命周期的绑定)

1.这篇文章很好，介绍的maven插件的。 2.maven的source插件为例，可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example，然后配置到riil-collect.xml中。  <build>   <plugins>    <pl
阅读更多...
FreeRTOS内部机制学习03（事件组内部机制）

FreeRTOS内部机制学习03（事件组内部机制）

文章目录 事件组使用的场景事件组的核心以及Set事件API做的事情事件组的特殊之处事件组为什么不关闭中断xEventGroupSetBitsFromISR内部是怎么做的？ 事件组使用的场景 学校组织秋游，组长在等待： 张三：我到了 李四：我到了 王五：我到了 组长说：好，大家都到齐了，出发！ 秋游回来第二天就要提交一篇心得报告，组长在焦急等待：张三、李四、王五谁先写好就交谁的
阅读更多...
【经验交流】修复系统事件查看器启动不能时出现的4201错误

【经验交流】修复系统事件查看器启动不能时出现的4201错误

方法1，取得『%SystemRoot%\LogFiles』文件夹和『%SystemRoot%\System32\wbem』文件夹的权限（包括这两个文件夹的所有子文件夹的权限），简单点说，就是使你当前的帐户拥有这两个文件夹以及它们的子文件夹的绝对控制权限。这是最简单的方法，不少老外说，这样一弄，倒是解决了问题。不过对我的系统，没用； 方法2，以不带网络的安全模式启动，运行命令行，输入“ne
阅读更多...
BT天堂网站挂马事件后续：“大灰狼”远控木马分析及幕后真凶调查

BT天堂网站挂马事件后续：“大灰狼”远控木马分析及幕后真凶调查

9月初安全团队披露bt天堂网站挂马事件，该网站被利用IE神洞CVE-2014-6332挂马，如果用户没有打补丁或开启安全软件防护，电脑会自动下载执行大灰狼远控木马程序。 鉴于bt天堂电影下载网站访问量巨大，此次挂马事件受害者甚众，安全团队专门针对该木马进行严密监控，并对其幕后真凶进行了深入调查。 一、“大灰狼”的伪装 以下是10月30日一天内大灰狼远控的木马样本截图，可以看到该木马变种数量不
阅读更多...
JS和jQuery获取节点的兄弟，父级，子级元素

JS和jQuery获取节点的兄弟，父级，子级元素

原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素。 <div id="test"><div></div><div></div
阅读更多...
react笔记 8-19 事件对象、获取dom元素、双向绑定

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{
阅读更多...
react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

1、定义方法并绑定 class News extends React.Component {constructor(props) {super(props)this.state = {msg:'home组件'}}run(){alert("我是一个run") //方法写在类中}render() {return (<div><h2>{this.state.msg}</h2><button onCli
阅读更多...
react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{}   注
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2