事件（ExtJs Event）

Ext.Util.observable類

Ext.Util.observable是一個接口，為Ext組件的事件提供了支持，組件的事件不同於傳統事件，所以需要有這麽一套事件體系。只有實現了該接口的組件才具有那些特殊的事件。

Ext.EventObjectImpl類

Dom中原始的Event對象被ExtJs封裝為Ext.EventObjectImpl。也即在ExtJs中Ext.EventObjectImpl就代表了原始的Event對象，它存儲了事件發生時的信息。每個偵聽器函數的參數中的那個e正是Ext.EventObjectImpl。

getX( ) | getY( )  | getXY( )
 
//獲取事件發生時，觸發事件的對象在文檔中的x、y坐標。最後一個方法返回數組，getXY( )[0]得到x坐標，getXY( )[1]得到y坐標。

getTarget( )
//獲取觸發事件的源對象。

preventDefault( bool )
//是否阻止瀏覽器默認動作。

stopPropagation( bool )
//是否阻止事件冒泡。

stopEvent( )
//立即停止事件。該方法內部自動調用preventDefault()和stopPropagation()兩個函數,取消瀏覽器的默認操作,同時停止事件冒泡。 

purgeElement( )
//清除該對象上綁定的所有事件。
 

註冊偵聽

//在組件的配置中添加listeners監聽
listeners :{
    focus:function(){
        alert("ssssss")
    }
}

//組件渲染完成後在外部註冊事件監聽
gridPanel.on(‘itemmouseenter‘, function () {}
//或
gridPanel.addListener(‘rowclick‘, function () {}

批量註冊偵聽

listeners :{
    focus:function(){alert("ssssss")},
    click:
 
function(){}
}

var link = Ext.fly("link");
link.on("click", function (e) {
e.preventDefault(true);
Ext.Msg.alert("", "click Event");
}).on("mouseout", function () {
Ext.Msg.alert("", "mouseout Event");
});

偵聽作用域

通過scope配置事件偵聽器的運行環境，因為函數運行在對象上，有時候這個對象可能並非你所期望的對象，此時直接通過配置scope明確指定運行函數的是哪個對象即可。

Ext.onReady(function () {
    var btn=new Ext.button.Button({text:"hello"});
    new Ext.window.Window({
        title: "widnow",
        width: 200,
        height: 100,
        listeners: {
            show: function () {
                Ext.Msg.alert("",this.text)//顯示按鈕的text
            },
            scope: btn//更改函數執行環境
        }
    }).show();
});

偵聽攔截

通過在綁定了事件的對象上調用suspendEvents()方法預先阻止某個事件，這樣，當事件發生時，事件偵聽器不會執行。

var btn1 = new Ext.button.Button({
    text: "mouseover",
    renderTo:Ext.getBody(),
    listeners: {
        mouseover: function () { Ext.Msg.alert("","mouseover Event");}
    }
});

var btn2 = new Ext.button.Button({
    text: "掛起",
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            btn1.suspendEvents();
        }
    }
});

偵聽恢復

通過在綁定了事件的對象上調用resumeEvents()方法恢復被攔截的事件。

var btn1 = new Ext.button.Button({
    text: "mouseover",
    renderTo:Ext.getBody(),
    listeners: {
        mouseover: function () { Ext.Msg.alert("","mouseover Event");}
    }
});

var btn2 = new Ext.button.Button({
    text: "掛起",
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            btn1.suspendEvents();
        }
    }
});

var btn2 = new Ext.button.Button({
    text: "恢復",
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            btn1.resumeEvents();
        }
    }
});

偵聽解綁

通過在綁定了事件的對象上調用un()方法可對偵聽進行解綁。解綁需要知道偵聽器的名字，而通常我們都是使用匿名函數註冊事件，想要解綁貌似只有將偵聽器寫在全局並命名該函數，但還有一個更簡單的辦法，而為了不在外部寫偵聽器，可以考慮將偵聽器註冊在window對象上，便於解綁。

var btn1 = new Ext.button.Button({
    text: "mouseover",
    renderTo:Ext.getBody(),
    listeners: {
        mouseover: window.show = function () { Ext.Msg.alert("", "mouseover Event");} //解綁偵聽需要函數的名字作為參數才能解綁，而為了不在外部寫偵聽器，可以考慮將偵聽器註冊在window對象上，便於解綁。
    }
});

var btn2 = new Ext.button.Button({
    text: "解綁",
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            btn1.un("mouseover", window.show);
        }
    }
});

手動觸發

貌似Element和Dom上的事件無法手動觸發？目前測試該方法在組件當中是有效的。

<div id="fire">點擊我後會觸發文本框的失焦事件</div>

var formPanel = new Ext.form.FormPanel({
    title: ‘form‘,
    renderTo:Ext.getBody(),
    width: 300,
    height: 125,
    items: [
            { xtype: ‘textfield‘, id: ‘text‘, fieldLabel: ‘哲學家‘, listeners: { blur: function () { Ext.Msg.alert("", this.getValue()); } } }
    ]
});

Ext.get(‘fire‘).on(‘click‘, function () {
    //當id為fire的div被點擊時，手工觸發下拉框的select事件
    var textfield = formPanel.getForm().findField(‘text‘);
    textfield.fireEvent(‘blur‘);
})

Javascript - ExtJs - 事件