extjs4 冻结列_extjs4 事件处理

一、addListener方法

Javascript代码  

varbutton = Ext.get('btn');

button.addListener('click',hello1);//绑定事件处理函数

button.addListener('click',hello2);

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

button.addListener('click',hello1);//绑定事件处理函数

button.addListener('click',hello2);

二、ExtJS支持的自定义事件

Javascript代码  

//创建Person类

varPerson = Ext.extend(Ext.util.Observable,{

constructor :function(name){

this.name = name;

this.sayNum = 0;

this.say =function(){

if(this.sayNum 

this.sayNum += 1;

alert('I am '+name);

}else{

this.sayNum = 0;//触发自定义事件后计数器归零

this.fireEvent('onSay',this);//激发自定义事件

}

}

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

"onSay":true

});

}

});

varper =newPerson('tom',3);//创建对象

//为自定义事件绑定处理函数

per.addListener('onSay',functionhandler(){

alert('发生了自定义事件');

});

//创建Person类

var Person = Ext.extend(Ext.util.Observable,{

constructor : function(name){

this.name = name;

this.sayNum = 0;

this.say = function(){

if(this.sayNum < 2){

this.sayNum += 1;

alert('I am '+name);

}else{

this.sayNum = 0;//触发自定义事件后计数器归零

this.fireEvent('onSay',this);//激发自定义事件

}

}

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

"onSay" : true

});

}

});

var per = new Person('tom',3);//创建对象

//为自定义事件绑定处理函数

per.addListener('onSay',function handler(){

alert('发生了自定义事件');

});

Html代码  

自定义事件的另外一个例子：

Javascript代码  

//继承自Ext.util.Observable

varPerson = Ext.extend(Ext.util.Observable,{

constructor :function(name){

this.name = name;

this.say =function(){

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

}

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

"onSay":true

});

}

});

varper =newPerson('tom');//创建对象

//为自定义事件绑定处理函数

per.addListener('onSay',function(name){

alert("I'am "+ name);

});

//继承自Ext.util.Observable

var Person = Ext.extend(Ext.util.Observable,{

constructor : function(name){

this.name = name;

this.say = function(){

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

}

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

"onSay" : true

});

}

});

var per = new Person('tom');//创建对象

//为自定义事件绑定处理函数

per.addListener('onSay',function(name){

alert("I'am " + name);

});

拦截器使用示例Observable.capture，与上面例子不同的地方是“var per = new Person('tom');//创建对象”代码之后的内容替换为：

Javascript代码  

per.addListener('onSay',handler);//为自定义事件绑定处理函数

functionhandler(){//事件处理函数

alert('发生了自定义事件');

}

//为per对象添加拦截器

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

//拦截函数

functioncaptureFunction(eventName){

if(eventName =='onSay'){//事件名称是onSay则返回false终止事件的执行

alert("拦截事件：“"+eventName+"”。");

returnfalse;

}

returntrue;

}

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;

}

三、addManagedListener受管事件监听器：

Javascript代码  

functioncreateFn(){

alert('新建');

}

functionopenFn(){

alert('打开');

}

functionsaveFn(){

alert('保存');

}

Ext.create('Ext.toolbar.Toolbar',{//创建工具栏

renderTo: Ext.getBody(),

bodyPadding: 5,

width:300,

items : [

{text:'新建',id:'createBtn',iconCls:'newIcon'},

{text:'打开',id:'openBtn',iconCls:'openIcon'},

{text:'保存',id:'saveBtn',iconCls:'saveIcon'},

{text:'销毁新建按钮',handler :function(){

//销毁新建按钮

Ext.getCmp('createBtn').destroy();

}}

]

});

varcreateBtn = Ext.getCmp('createBtn');

createBtn.on('click',createFn);

//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁

//了则事件绑定同时解除。

createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);

createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);

function createFn(){

alert('新建');

}

function openFn(){

alert('打开');

}

function saveFn(){

alert('保存');

}

Ext.create('Ext.toolbar.Toolbar',{//创建工具栏

renderTo: Ext.getBody(),

bodyPadding: 5,

width:300,

items : [

{text:'新建',id:'createBtn',iconCls:'newIcon'},

{text:'打开',id:'openBtn',iconCls:'openIcon'},

{text:'保存',id:'saveBtn',iconCls:'saveIcon'},

{text:'销毁新建按钮',handler : function(){

//销毁新建按钮

Ext.getCmp('createBtn').destroy();

}}

]

});

var createBtn = Ext.getCmp('createBtn');

createBtn.on('click',createFn);

//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁

//了则事件绑定同时解除。

createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);

createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);

四、relayEvents传播分发事件：

Javascript代码  

//创建Employee工人类

varEmployee = Ext.extend(Ext.util.Observable,{

constructor :function(config){

this.name = config.name;

this.eat =function(){

this.fireEvent('startEat',this);//激发开始吃饭事件

this.fireEvent('finishEat',this);//激发结束吃饭事件

}

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

"startEat":true,//开始吃饭事件

"finishEat":true//结束吃饭事件

});

Employee.superclass.constructor.call(this, config)

}

});

//定义Waiter服务员类

varWaiter = Ext.extend(Ext.util.Observable,{

constructor :function(config){

Waiter.superclass.constructor.call(this, config);

}

});

//创建员工对象

varemp =newEmployee({name:'tom'});

//为自定义事件绑定处理函数

emp.addListener('startEat',function(){

alert(this.name +'开始吃饭了。');

});

emp.addListener('finishEat',function(){

alert(this.name +'吃完饭，可以收拾盘子了。');

});

//创建服务员对象

varwaiter =newWaiter();

//使服务员对象与员工对象的finishEat事件进行关联

//也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，

//然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。

waiter.relayEvents(emp, ['finishEat']);

waiter.on('finishEat',function(){

alert('服务员开始收拾盘子。');

});

//创建Employee工人类

var Employee = Ext.extend(Ext.util.Observable,{

constructor : function(config){

this.name = config.name;

this.eat = function(){

this.fireEvent('startEat',this);//激发开始吃饭事件

this.fireEvent('finishEat',this);//激发结束吃饭事件

}

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

"startEat" : true,//开始吃饭事件

"finishEat" : true//结束吃饭事件

});

Employee.superclass.constructor.call(this, config)

}

});

//定义Waiter服务员类

var Waiter = Ext.extend(Ext.util.Observable,{

constructor : function(config){

Waiter.superclass.constructor.call(this, config);

}

});

//创建员工对象

var emp = new Employee({name:'tom'});

//为自定义事件绑定处理函数

emp.addListener('startEat',function(){

alert(this.name + '开始吃饭了。');

});

emp.addListener('finishEat',function (){

alert(this.name + '吃完饭，可以收拾盘子了。');

});

//创建服务员对象

var waiter = new Waiter();

//使服务员对象与员工对象的finishEat事件进行关联

//也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，

//然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。

waiter.relayEvents(emp, ['finishEat']);

waiter.on('finishEat',function(){

alert('服务员开始收拾盘子。');

});

Html代码  

五、Ext.EventObject示例

Javascript代码  

varbtn = Ext.get('buttonTest');

btn.addListener('click',handler);//为click事件绑定处理函数

functionhandler(e){//事件处理函数

//获取事件发生时的x坐标

varx = e.getPageX();

//获取事件发生时的y坐标

vary = e.getPageY();

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

alert(Ext.EventManager.getPageXY(e));

alert(msg);

}

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

btn.addListener('click',handler);//为click事件绑定处理函数

function handler(e){//事件处理函数

//获取事件发生时的x坐标

var x = e.getPageX();

//获取事件发生时的y坐标

var y = e.getPageY();

var msg = '事件发生坐标 : x='+x+' y='+y;

alert(Ext.EventManager.getPageXY(e));

alert(msg);

}

六、Ext.EventManager使用

Javascript代码  

Ext.EventManager.addListener('btn','click',handler);//绑定处理函数