ExtJs元件監聽事件
阿新 • • 發佈:2019-01-08
extjs對元件新增監聽的常用三種方式
(1)在定義元件的配置時設定
如程式碼中所示:
xtype : 'textarea',
name : 'test',
labelSeparator:'',
fieldLabel:'',
hideLabel: true,
allowBlank: true,
height: mainPanelHeight*0.8,
listeners:{
'change':function(){
alert('change');
}
}
這種寫法就是定義元件的時候就給元件綁上了監聽,寫在元件裡\
基本寫法為: listeners{'事件',function(){處理方法}};
監聽會在元件進行相應的事件時觸發,例如本例中的change事件,每個元件所有擁有的觸發事件都是不一樣的,常見的有focus,blur,change,beforequery等.
(2)對元件變數通過on方法設定
例如已經定義了一個型別為GridPanel的變數gridPanel,則再通過on方法設定行雙擊事件
gridPanel.on('rowdblclick',function(gridPanel,_rowIndex,e){
alert('test2');
}
這種方法比較靈活.主要給dom物件來監聽事件
基本寫法為:Ext.get(document).on('事件',function(){ 處理方法})
(3)通過元件變數方法addListener()設定
如上述的gridPanel變數,新增行單擊事件如下
gridPanel.addListener('rowclick',function(){
alert('test3')}
);
事件監聽是為定義物件的一個事件配置了個監聽器,其實就是為事件註冊了一個函式,實現方法就是上述三種方法.當這個事件被觸發時,extjs會自動呼叫相應的註冊函式.
自定義的物件(例如A)需要先定義事件,(如用addEvent(E)),然後再為定義好的事件新增監聽(this.A.on("E",functionE1))
而使用Ext自帶的元件物件,則需要選擇元件自身支援的事件來新增監聽.
js程式碼使用了監聽,更能完成一些特殊的功能,例如校驗,清空,自動傳值,級聯操作等等,使介面功能效果更容易實現.