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的開發中是很重要的。