Javascript - ExtJs - 事件

標籤：執行   停止   動作   添加   文字框   res   命名   技術分享   手工   

事件（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( )//清除該對象上綁定的所有事件。

方法.method

 註冊偵聽

//在組件的配置中添加listeners監聽listeners :{    focus:function(){        alert("ssssss")    }}//組件渲染完成後在外部註冊事件監聽gridPanel.on(‘itemmouseenter‘, function () {}//或gridPanel.addListener(‘rowclick‘, function () {}

View Code

大量註冊偵聽

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");});

View Code

偵聽範圍

通過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();});

View Code

偵聽攔截

通過在綁定了事件的對象上調用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();        }    }});

View Code

偵聽恢複

通過在綁定了事件的對象上調用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();        }    }});

View Code

偵聽解除綁定

通過在綁定了事件的對象上調用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);        }    }});

View Code

手動觸發

貌似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‘);})

View Code

Javascript - ExtJs - 事件