ExtJS框架的事件模型及其常用功能 - 面向对象网,web开发,Extjs,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Extjs > 正文

ExtJS框架的事件模型及其常用功能

来源: www.bianceng.cn 阅读:

前言

工作中用ExtJS有一段时间了,Ext丰富的UI组件大大的提高了开发B/S应用的效率。虽然 近期工作中天天都用到ExtJS,但很少对ExtJS框架原理性的东西进行过深入学习,这两天花了些时间学习 了下。我并不推荐大家去研究ExtJS框架的源码,虽然可以学习其中的思想和原理,但太浪费精力了,除 非你要自己写框架。

对于ExtJS这种框架,非遇到“杂症”的时候我觉得也没必要去研究其源码和 底层的原理,对其一些机制大致有个概念,懂得怎么用就行,这也是本篇博文的主要目的。
Ext自 己的事件机制

Ext中的事件遵循树状模型,和事件相关的类主要有这么几个: Ext.util.Observable、Ext.lib.Event、Ext.EventManager和Ext.EventObject。

Ext使用 Ext.lib.Event、Ext.EventManager和Ext.EventObject对原生浏览器事件进行了封装,最后给我们用的是 一套统一的跨浏览器的通用事件接口。HTML元素本身已经支持事件,为什么基本上所有的主流JS框架都要 实现自己的事件机制呢?一个最主要的原因是HTML元素对事件的处理是通过简单的单一绑定实现的,如果 不进行封装,事件只能绑定到一个事件处理句柄。如下面代码所示:

var e = document.getElementById("test");
e.onclick = function() { alert("handler1") };
e.onclick = function() { alert("handler2") };

单击test按钮后会发现只会弹出一个显示 "handler2"的提示框,因为第一个被覆盖。而使用像Ext、jQuery这样的框架就不用担心这个 问题,同一个事件可以依次绑定多个事件处理句柄,如下代码所示:

Ext.onReady(function () 

{
    var test = Ext.get("test");
    test.on("click", function () {
        alert("handler1");
    });
    test.on("click", function () {
        alert("handler2");
    });
});

Ext实现自己的事件机制,原因很多,比如为了兼容不同浏览器之间的差异等。Ext对原生浏 览器事件的封装都在上面所说的几个类中,如果在项目中要熟练应用Ext,是非常有必要了解一下和事件 相关的类和常用函数的。下面开始介绍这些类和它们的功能。
Ext.util.Observable
Ext.util.Observable在Ext事件模型中有着举足轻重的地位,位于Ext组件的顶端,为Ext组件提供处理 事件的最基本的功能。所有继承自Ext.util.Observable类的控件都可以支持事件。可以为这些继承了 Ext.util.Observable的对象定义一些事件,然后为这此事件配置监听器。当某个事件触发时,Ext会自动 调用对应的监听器,这些就是Ext的事件模型。
下面通过继承Ext.util.Observable来实现一个支持 事件的对象:

Ext.onReady(function () {
    //定义一个Person类。
    function Person(name) {
        this.name = name;
        this.addEvents("walk", "eat");
        this.superclass.constructor.call(this);
    }
    
    //1、让Person继承Ext.util.Observable的所有属性,
    //   这样Person类构造器中的addEvents和Person.superclass.constructor.call()在实例创建时才

会起作用。
    //   Person的实例就可以应用Ext的事件相关的on、un等方法和在Person类构造器中的addEvents和

Person.superclass.constructor.call()了。
    //2、添加一个info()函数,让它返回Person信息。
    Ext.extend(Person, Ext.util.Observable, {
        info: function (event) {
            return this.name + " is " + (event ? "ing" : "doing nothing") + ".";
        }
    });
    
    //1、创建一个Person实例,然后为它的事件配置好监听器。
    //2、on是addListener的简写,un是removeListener简写
    var person = new Person("Liam");
    person.on("walk", function () {
        this.state = "walk";
        Ext.Msg.alert("event", this.name + " is walking.");
    });
    person.on("eat", function (meal) {
        this.state = "eat";
        Ext.Msg.alert("event", this.name + " is eating " + meal + ".");
    });
    
    //测试效果
    Ext.get("btnWalk").on("click", function () {
        person.fireEvent("walk");
    });
    Ext.get("btnEat").on("click", function () {
        person.fireEvent("eat", "breakfast");
    });
    Ext.get("btnInfo").on("click", function () {
        Ext.Msg.alert("info", person.info(person.state));
    });
});

以上代码展示了在Ext中如何通过继承Ext.util.Observable给一个类自定义事件,到这,我 们大概也了解了addListener/on、addEvents和fireEvent这些函数的基本用法,removeListener/un函数 相关内容还会在本文后面介绍。如果要了解Ext.util.Observable的其他细节,可看看Ext官方API文档的 介绍。
Ext.lib.Event

Tags:
相关文章列表: