您的位置：首页 > Web前端 > JavaScript

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

2016-01-08 08:40 621 查看

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

标签： extjs button function delay stylesheet buffer
2010-10-08 16:30 10239人阅读评论(3) 收藏举报

版权声明：本文为博主原创文章，未经博主允许不得转载。

鉴于最近更新主页比较慢，先把最近更新的extJs示例发到这里好了。

页面代码：

[javascript] view
plaincopy

<body>

        <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />

        <mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>

        <mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>

        <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">

            事件使用例子，包括自定义事件及on、addListener和EventManager的使用。

        </div>

        <div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">

            鼠标移到我试试！

        </div>

        <br>

        <div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">

            <input type="button" name="button1" id="button1" value="点我" />

        </div>

        <mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>

    </body>

js代码

[javascript] view
plaincopy

/****************************************

* 自定义事件使用

*/

var Person = function(){

    // 注册事件,该事件名字为：say

    this.addEvents("say");

    // 另外一种方式注册多个事件

    this.addEvents({

        "run" : true,

        "see": false

    });

}

// Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能

Ext.extend(Person,Ext.util.Observable);



// 定义相关执行的方法

var speak = function(){

    alert("I can speak!");

}

var run = function(){

    alert("I can run!");

}

var see = function(){

    alert("I can see the word!");

}



var person = new Person();

// 将方法say绑定到事件say上。二者名字可以不一样

person.on("say", speak);

person.on("run", run);

person.on("see", see);



// 触发事件，这里只触发了say和run。see事件没有触发就不会发生

person.fireEvent("say");

person.fireEvent("run");

/*****************************************/



Ext.onReady(function() {

    // 返回的Element对象,不等价于document.getElementById(id)

    // Ext.getDom(id)才等价于document.getElementById(id)

    var eventTestDiv = Ext.get("eventTestDiv");

    // 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子

    Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){

        Ext.Msg.alert('信息', 'Id：' + this.id + '<br>内容：' + this.innerHTML);

    });

    Ext.EventManager.addListener(eventTestDiv,"click",function(){

        Ext.Msg.alert('信息', 'Id：' + this.id

            + '<br>name：' + this.name

            + '<br>value：' + this.value);

    });

    /**

     使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项

     有4个配置选项:

        delay{Number}：触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)；

        scope{Object}：事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)；

        single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)；

        buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会被启用，但是新处理器句柄会安排在其位置。

        以下的配置未用过：

            delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。

            stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。

            preventDefault {Boolean} : true表示为阻止默认动作。

            stopPropagation {Boolean} : true表示为阻止事件传播。

            normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。

    */

    var button1 = Ext.get("button1");

    // addListener等价于on，on只是addListener的简写

    button1.addListener("click",function(){

        // 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象

        var msg = '<br/>获取选填参数信息：<br/>选填参数个数：' + arguments.length + "<br/>";

        for(var i in arguments[2]) {

            msg += i + "：" + arguments[2][i] + "<br/>";

        }

        Ext.Msg.alert('信息', '打印eventTestDiv的信息：<br/><br/>Id：' + this.id

            + "<br/>" + msg

        );

    },eventTestDiv, {

        // 事件延迟触发事件

        delay : 500,

        // 是否只触发一次

        single: false,

        msg   : '我是追加的参数'

    });

    /**

     事件的几种写法（addListener和on是等价的）：

     var fn = function (){

        // 这里添加需要处理的逻辑

     };

    // 第一种写法

    button1.addListener("click",fn,button1);

    button1.addListener("mouseover",fn,button1);



    //第二种写法

    button1.on({

        click     : fn,

        mouseover : fn,

        scope     : button1

    });



    //第三种写法

    button1.on({

        click     : {scope:button1, delay:3000, fn:fn},

        mouseover : {scope:button1, delay:1000, fn:fn}

    });

    */

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航