extjs的自定义事件

extjs的自定义事件主要分三步

1.在类中定义事件名称：

 

  Person = function(config) {
        Person.superclass.constructor.call(this, config);
        this.name = config.name || '';
        this.sex = config.sex || '';
        this.addEvents({
            "nameChange": true,
            "sexChange": true
        });
    };

 

2.实例化对象，并在该对象中定义事件的监听函数

     

  var person = new Person({
            name: 'binoruv',
            sex: 'man'
        });

        person.on("nameChange", function() { alert("Name has been changed to " + this.name); });
        person.on("sexChange", function() { alert("Sex has been changed to " + this.sex); });

 3.触发事件

  

Ext.extend(Person, Ext.util.Observable, {
       //extend函数中可以自定义新的方法，也可以重写原类的方法
        setName: function(_name) {
            if (this.name != _name) {
                this.name = _name;
                this.fireEvent("nameChange", this);
            }
        },
        setSex: function(_sex) {
            if (this.sex != _sex) {
                this.sex = _sex;
                this.fireEvent("sexChange", this);
            }
        }
    });

        person.setName("binoruv");
        person.setSex("woman");

 

整个代码如下：

<script type="text/javascript">
    Person = function(config) {
        /*
        此处addEvents是调用Person父类Ext.util.Observable的方法
        api中对Observable的描述：一个抽象基类（Abstract base class），为事件
        机制的管理提供一个公共接口。子类应有一个"events"属性来
        定义所有的事件。
        */
        Person.superclass.constructor.call(this, config);

        this.name = config.name || '';
        this.sex = config.sex || '';
        this.addEvents({
            "nameChange": true,
            "sexChange": true
        });
    };

    Ext.extend(Person, Ext.util.Observable, {
        setName : function(_name) {
            if (this.name != _name) {
                this.name = _name;
                this.fireEvent("nameChange", this);
            }
        },
        setSex : function(_sex) {
            if (this.sex != _sex) {
                this.sex = _sex;
                this.fireEvent("sexChange", this);
            }
        }
    });

    Ext.onReady(function() {
        var person = new Person({
            name: 'binoruv',
            sex: 'Man'
        });

        person.on("nameChange", function() { /*debugger;*/Ext.Msg.alert("Message","Name has been changed to " + this.name); });
        person.on("sexChange", function() { /*debugger;*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex); });

        person.setName("binoruv");
        person.setSex("Woman");
    });
</script>

 1. 处理HTML元素的标准事件

HTML元素的标准事件是指mouseover、mousedown、click、 blur、focus、change等。在ExtJS中，这些事件的处理如下：

    注册一个事件处理函数使用： Ext.get('myElement').on('click', myHandler, myScope) myElement是要注册的元素的ID，click是事件的名称（注意，和HTML元素中的声明onXXX不同，这里不需要on），myHandler 是处理函数的函数名称，myScope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的 window。
    撤销一个事件处理函数： Ext.get('myElement').un('click', myHandler, myScope) 参数的意义同上。

ExtJS 会根据不同的浏览器进行相应的处理，支持多浏览器。事件处理函数的参数只能参考ExtJS的文档了，必要时还得参考源代码。

2. 处理自定义事件

在ExtJS中使用自定义事件，需要从Ext.util.Observable继承，示例代码如下：

Employee = function(name){
this.name = name;
this.addEvents({
"fired" : true,
"quit" : true
});
}
Ext.extend(Employee, Ext.util.Observable, { ... });

在这段代码中，定义了一个Employee类，定义了fired和quit两个事件。如何触发这两个事件呢，基类 Ext.util.Observable提供了触发自定义事件的方法fireEvent(eventName, arg1, arg2, ... argn), eventName是要触发的时间的名称（不区分大小写），后面的参数arg1，arg2等是要传给事件处理函数的参数。用上面的Employee类做示例，触发quit事件：

this.fireEvent('quit', this);

这行代码将触发quit事件，并将Empolyee类的实例传给quit事件的处理函数，quit事件的订阅可以采用如下代码：

function myHandler1(empolyee){ ... }
function myHandler2(empolyee){ ... }
var emp = new Empolyee('tom');
emp.on('quit', myHandler1);
emp.on('quit', myHandler2);

在上面的代码中，为quit事件注册了两个处理函数（myHandler1与myHandler），当quit事件被激发时，将会依次调用 myHandler1和myHandler2两个函数。

值得注意的是，不管是HTML元素的标准事件还是自定义事件，如果为某个时间注册了多个处理函数，如前面的例子，如果myHandler1返回 false的话，则会取消在myHandler1之后注册的处理函数的执行，即该事件被取消，从而停止继续执行该事件的处理函数，而这个返回值false 会作为事件激发的结果，返回给empolyee，即：

var result = this.fireEvent('quit', this);
if (result === false) {
alert('event canceled'); //这里表示事件被某个处理函数取消
}
else {
alert('event complete'); // 这里表示事件执行完毕
}

通过Ext的自定义事件的机制，可以实现一对多的观察者模式，也可以实现一对一的绑定模式，这一点，在ExtJS的开发中是很重要的。