天天看點

EXTJS 事件 相關示例

标準的事件綁定方式

<body>

<input type='button' id='btn' value='ok'>

</body>

<mce:script language="JavaScript"><!--

function hello1(){

alert('hello1');

}

function hello2(){

alert('hello2');

}

var button = document.getElementById('btn');

button.attachEvent('onclick',hello1);//該方法僅适用于IE浏覽器

button.attachEvent('onclick',hello2);

// --></mce:script>

Extjs方式的事件綁定

Ext.onReady(function(){

function hello1(){

alert('hello1');

}

function hello2(){

alert('hello2');

}

var button = Ext.get('btn');

button.addListener('click',hello1);//綁定事件處理函數

button.addListener('click',hello2);

});

firefox浏覽器的事件綁定

<body>

<input type='button' id='btn' value='ok'>

</body>

<mce:script language="JavaScript"><!--

function hello1(){

alert('hello1');

}

function hello2(){

alert('hello2');

}

var button = document.getElementById('btn');

button.addEventListener('click',hello1,false);

button.addEventListener('click',hello2,false);

// --></mce:script>

Extjs支援的自定義事件

<mce:script type="text/javascript"><!--

Person = function(name){

this.name = name;

this.sayNum = 0;

this.say = function(){

if(this.sayNum < 2){

this.sayNum += 1;

alert('I am '+name);

}else{

this.fireEvent('onSay',this);//激發自定義事件

}

}

this.addEvents({//加入自定義事件

"onSay" : true

});

}

Ext.extend(Person, Ext.util.Observable);//繼承自Ext.util.Observable

var per = new Person('tom');//建立對象

per.addListener('onSay',handler);//為自定義事件綁定處理函數

function handler(){//事件處理函數

alert('發生了自定義事件');

}

// --></mce:script>

或者:

<mce:script type="text/javascript"><!--

Person = function(name){

this.name = name;

this.say = function(){

this.fireEvent('onSay',this.name);//激發自定義事件

}

this.addEvents({//加入自定義事件

"onSay" : true

});

}

Ext.extend(Person, Ext.util.Observable);//繼承自Ext.util.Observable

var per = new Person('tom');//建立對象

per.addListener('onSay',handler);//為自定義事件綁定處理函數

function handler(name){//事件處理函數

alert("I'am " + name);

}

// --></mce:script>

事件攔截器的使用

<mce:script type="text/javascript"><!--

Person = function(name){

this.name = name;

this.say = function(){

this.fireEvent('onSay',this);//激發自定義事件

}

this.addEvents({//加入自定義事件

"onSay" : true

});

}

Ext.extend(Person, Ext.util.Observable);//繼承自Ext.util.Observable

var per = new Person('tom');//建立對象

per.addListener('onSay',handler);//為自定義事件綁定處理函數

function handler(){//事件處理函數

alert('發生了自定義事件');

}

//為per對象添加攔截器

Ext.util.Observable.capture(per,captureFunction);

//攔截函數

function captureFunction(eventName){

if(eventName == 'onSay'){//事件名稱是onSay則傳回false終止事件的執行

alert("攔截事件“"+eventName+"”的執行。");

return false;

}

return true;

}

// --></mce:script>

Ext.EventObject e 示例

<script type="text/javascript">

var btn = Ext.get('buttonTest');

btn.addListener('click',handler);//為click事件綁定處理函數

function handler(e){//事件處理函數

//擷取事件發生時間

var time = (new Date(e.getTime())).format('Y-m-d H:m:s');

//擷取事件發生時的x坐标

var x = e.getPageX();

//擷取事件發生時的y坐标

var y = e.getPageY();

var msg = '事件發生時間 : '+time+'/n'+

'事件發生坐标 : x='+x+' y='+y;

alert(msg);

}

</script>

Ext.EventManager應用舉例 綁定處理事件

<script type="text/javascript">

Ext.onReady(function(){

Ext.EventManager.addListener('btn','click',handler);//綁定處理函數

function handler(){//事件處理函數

alert('hello');

}

});

</script>

</HEAD>

<BODY>

<input type='button' value='say' id='btn'>

</BODY>

</HTML>

繼續閱讀