天天看点

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>

继续阅读