ExtJs组件监听事件

extjs对组件添加监听的常用三种方式 

(1)在定义组件的配置时设置

如代码中所示： 

[javascript] view plain copy

1. <span style="font-size:14px;">xtype  : 'textarea',    
2. name : 'test',    
3. labelSeparator:'',    
4. fieldLabel:'',    
5. hideLabel: true,    
6. allowBlank: true,    
7. height: mainPanelHeight*0.8,    
8.    
9. listeners:{  
10.     'change':function(){    
11.         alert('change');    
12.     }  
13. }    
14. </span>  

          这种写法就是定义组件的时候就给组件绑上了监听,写在组件里\

          基本写法为:  listeners｛'事件',function(){处理方法}｝;

          监听会在组件进行相应的事件时触发,例如本例中的change事件,每个组件所有拥有的触发事件都是不一样的,常见的有focus,blur,change,beforequery等.

(2)对组件变量通过on方法设置

        例如已经定义了一个类型为GridPanel的变量gridPanel，则再通过on方法设置行双击事件 

[javascript] view plain copy

1. <span style="font-size:14px;">     gridPanel.on('rowdblclick',function(gridPanel,_rowIndex,e){    
2.           alert('test2');    
3.      }  </span>  

         这种方法比较灵活.主要给dom对象来监听事件  
         基本写法为:Ext.get(document).on('事件',function(){ 处理方法})

(3)通过组件变量方法addListener()设置

      如上述的gridPanel变量，添加行单击事件如下 

[javascript] view plain copy

1. <span style="font-size:14px;">      gridPanel.addListener('rowclick',function(){    
2.             alert('test3')}    
3.       );  </span>  

        事件监听是为定义对象的一个事件配置了个监听器,其实就是为事件注册了一个函数,实现方法就是上述三种方法.当这个事件被触发时,extjs会自动调用相应的注册函数.

       自定义的对象(例如A)需要先定义事件,(如用addEvent(E)),然后再为定义好的事件添加监听(this.A.on("E",functionE1))

       而使用Ext自带的组件对象,则需要选择组件自身支持的事件来添加监听.

       js代码使用了监听,更能完成一些特殊的功能,例如校验,清空,自动传值,级联操作等等,使界面功能效果更容易实现.