`

ExtJs事件（自定义事件、on、eventManager）示例

 
阅读更多

  1. <body>  
  2.         <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  3.         <mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>  
  4.         <mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>  
  5.         <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">  
  6.             事件使用例子，包括自定义事件及on、addListener和EventManager的使用。  
  7.         </div>  
  8.         <div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">  
  9.             鼠标移到我试试！  
  10.         </div>  
  11.         <br>  
  12.         <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">  
  13.             <input type="button" name="button1" id="button1" value="点我" />   
  14.         </div>  
  15.         <mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>  
  16.     </body>  


  1. /**************************************** 
  2.  * 自定义事件使用 
  3.  */  
  4. var Person = function(){  
  5.     // 注册事件,该事件名字为：say  
  6.     this.addEvents("say");  
  7.     // 另外一种方式注册多个事件  
  8.     this.addEvents({  
  9.         "run" : true,  
  10.         "see": false  
  11.     });  
  12. }  
  13. // Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能  
  14. Ext.extend(Person,Ext.util.Observable);  
  15.   
  16. // 定义相关执行的方法  
  17. var speak = function(){  
  18.     alert("I can speak!");  
  19. }  
  20. var run = function(){  
  21.     alert("I can run!");  
  22. }  
  23. var see = function(){  
  24.     alert("I can see the word!");  
  25. }  
  26.   
  27. var person = new Person();  
  28. // 将方法say绑定到事件say上。二者名字可以不一样  
  29. person.on("say", speak);  
  30. person.on("run", run);  
  31. person.on("see", see);  
  32.   
  33. // 触发事件，这里只触发了say和run。see事件没有触发就不会发生  
  34. person.fireEvent("say");  
  35. person.fireEvent("run");  
  36. /*****************************************/  
  37.   
  38. Ext.onReady(function() {  
  39.     // 返回的Element对象,不等价于document.getElementById(id)  
  40.     // Ext.getDom(id)才等价于document.getElementById(id)  
  41.     var eventTestDiv = Ext.get("eventTestDiv");  
  42.     // 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子  
  43.     Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){  
  44.         Ext.Msg.alert('信息', 'Id：' + this.id + '<br>内容：' + this.innerHTML);  
  45.     });  
  46.     Ext.EventManager.addListener(eventTestDiv,"click",function(){  
  47.         Ext.Msg.alert('信息', 'Id：' + this.id  
  48.             + '<br>name：' + this.name  
  49.             + '<br>value：' + this.value);  
  50.     });  
  51.     /** 
  52.      使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项 
  53.      有4个配置选项: 
  54.         delay{Number}： 触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)； 
  55.         scope{Object}： 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)； 
  56.         single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)； 
  57.         buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。 
  58.         以下的配置未用过： 
  59.             delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。 
  60.             stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。 
  61.             preventDefault {Boolean} : true表示为阻止默认动作。 
  62.             stopPropagation {Boolean} : true表示为阻止事件传播。 
  63.             normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。 
  64.     */  
  65.     var button1 = Ext.get("button1");  
  66.     // addListener等价于on，on只是addListener的简写  
  67.     button1.addListener("click",function(){  
  68.         // 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象  
  69.         var msg = '<br/>获取选填参数信息：<br/>选填参数个数：' + arguments.length + "<br/>";  
  70.         for(var i in arguments[2]) {  
  71.             msg += i + "：" + arguments[2][i] + "<br/>";  
  72.         }  
  73.         Ext.Msg.alert('信息', '打印eventTestDiv的信息：<br/><br/>Id：' + this.id  
  74.             + "<br/>" + msg  
  75.         );  
  76.     },eventTestDiv, {  
  77.         // 事件延迟触发事件  
  78.         delay : 500,  
  79.         // 是否只触发一次  
  80.         single: false,  
  81.         msg   : '我是追加的参数'  
  82.     });  
  83.     /** 
  84.      事件的几种写法（addListener和on是等价的）： 
  85.      var fn = function (){ 
  86.         // 这里添加需要处理的逻辑 
  87.      }; 
  88.     // 第一种写法 
  89.     button1.addListener("click",fn,button1); 
  90.     button1.addListener("mouseover",fn,button1); 
  91.      
  92.     //第二种写法 
  93.     button1.on({ 
  94.         click     : fn, 
  95.         mouseover : fn, 
  96.         scope     : button1 
  97.     }); 
  98.    
  99.     //第三种写法 
  100.     button1.on({ 
  101.         click     : {scope:button1, delay:3000, fn:fn}, 
  102.         mouseover : {scope:button1, delay:1000, fn:fn} 
  103.     }); 
  104.     */  
  105. })  

分享到：
| a-ext-desktop-website
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS如何自定义图片按钮组件

    1.ExtJS自定义组件，图片按钮为例. 2.此图片按钮背景完全为图片，没有边框，需要使用者提供2张图片，一张初始化用，一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...

    Extjs4.2自定义ComboTree

    Extjs4.2自定义ComboTree

    ExtJs自定义消息框

    ### ExtJs自定义消息框详解 #### 一、引言 在Web开发中，与用户的交互体验至关重要。作为一款优秀的JavaScript框架，ExtJs提供了多种工具和组件帮助开发者快速构建高质量的用户界面。其中，消息框作为一种常见的...

    Extjs源码之--Ext事件机制/继承关系

    EXTJS的事件处理主要由EventManager.js这个文件负责，它是EXTJS事件系统的基础。 首先，EXTJS的事件机制基于观察者模式，即事件发布者（Publisher）发出事件，而事件订阅者（Subscriber）监听并响应这些事件。Event...

    extjs4自定义深蓝色主题

    "extjs4自定义深蓝色主题"是针对ExtJS4框架的一个特定主题设计，旨在为应用程序提供一种专业且深沉的视觉体验。 这个主题继承自ExtJS4的经典（Classic）主题，这意味着它在保持原有组件结构的基础上，对颜色、字体...

    extjs 自定义验证

    extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树：深入解析与实现 在现代Web开发中，Extjs作为一款功能强大且灵活的框架，深受开发者喜爱。它提供了丰富的UI组件库，能够帮助开发者快速构建复杂的用户界面。其中，自定义组件是Extjs...

    extjs用户自定义换肤并保存

    在提供的压缩包文件“ExtJS皮肤”中，可能包含了EXTJS的不同皮肤示例，包括预定义的皮肤文件和可能的一些自定义皮肤案例。通过研究这些文件，我们可以了解到如何构建和应用皮肤，以及如何将用户的选择保存到本地以便...

    EXTJS事件实例源码

    1. **事件监听与触发**：EXTJS中的每个组件都拥有自己的事件系统，可以通过`addListener`（或简写`on`）方法来监听事件，`fireEvent`方法来触发事件。例如： ```javascript var button = Ext.create('Ext.button....

    EXTJS 自定义combo控件

    xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称，默认null //公共方法 getJXValue():返回自定义字段的值，如果没有自定义字段，则等价Ext.form.Combo类的getValue()方法

    extjs自定义控件

    - **监听器**：自定义控件可以添加自己的事件，通过`listeners`配置项或`addEvents`方法定义事件，然后使用`on`、`un`或`mon`方法添加事件监听器。 - **事件代理**：利用`delegate`配置项，可以在控件内部对特定...

    ExtJs自定义分页控件----PM3PagingToolbar.js

    在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...

    ExtJs事件处理 ajax

    - 在ExtJs中，可以使用`on`方法来监听DOM元素或Ext组件的事件。例如，监听ID为'somelink'的元素的点击事件，可以这样写： ```javascript var el = Ext.get('somelink'); el.on('click', function() { alert('...

    ExtJs6.2中包含文本及时间选择框的自定义查询控件的解决方案

    ### ExtJs 6.2 中包含文本及时间选择框的自定义查询控件解决方案 在ExtJs 6.2框架中实现一个具有文本输入与时间选择功能的自定义查询控件是一个常见但实用的需求。本篇文章将详细介绍如何设计并实现这样一个控件，...

    自定义高级查询Extjs

    在这个场景中，"自定义高级查询Extjs"指的是利用Ext JS框架来构建这样的功能。Ext JS是一个流行的JavaScript库，用于创建富客户端应用程序，特别是与数据展示和操作相关的Web应用。 1. **Ext JS简介** - Ext JS...

    EXTJS主题自定义

    EXTJS主题自定义是关于如何根据EXTJS框架创建和应用个性化视觉主题的过程。EXTJS是一个JavaScript库，用于构建富客户端应用程序，它提供了丰富的组件和强大的数据管理能力。主题是EXTJS应用程序的重要组成部分，它们...

    Extjs6示例中文版

    ### Extjs6示例中文版知识点详解 #### 1. ExtJS6简介及学习动机 ExtJS6是一款功能强大的客户端JavaScript框架，适用于构建复杂的企业级Web应用程序。由于中文学习资源较少，作者决定翻译一本名为《ExtJS6 By ...

    Extjs 自定义树结构实现以及动态表头实现

    在本文中，我们将深入探讨如何使用ExtJS框架来实现自定义树结构以及动态表头的功能。ExtJS是一款强大的JavaScript库，常用于构建富客户端应用程序，它提供了丰富的UI组件和强大的数据绑定机制。VS2015是Visual ...

    ExtJS 事件笔记

    - **Ext.EventManager**：ExtJS的事件管理策略封装在这个单体类中，负责跨浏览器的兼容性处理和事件处理函数的维护。 - **Ext.lib.Event**：处理底层的跨浏览器兼容性问题。 - **创建代理函数**：使用`...

    ExtJS静态使用示例

    以下是对标题"ExtJS静态使用示例"和描述中涉及知识点的详细解释： 1. **ExtJS库**：ExtJS是Sencha公司开发的一个前端框架，它基于MVC（Model-View-Controller）设计模式，提供了丰富的UI组件和强大的数据管理能力。...

Magicbox
Global site tag (gtag.js) - Google Analytics