ExtJS為我們封裝了完整的鍵盤監聽事件,我們只要調用相應的接口就能完美的實現鍵盤監聽。在所有的鍵盤事件中,按回車鍵提交表單,實現登 錄的功能是我們最常用到的鍵盤監聽事件,下面李壞給出一個實現回車鍵提交表單的案例,希望能給ExtJS的新手朋友們提供幫助。
首先,我們定義一個表單,代碼如下:
Ext.define('Demo.view.Viewport', {
extend: 'Ext.container.Viewport',
items:[{
xtype: 'form',
title: 'ExtJS監聽鍵盤事件',
width: 500,
height: 400,
margin: '100 0 0 200',
defaults:{
xtype: 'textfield',
width: 300,
labelWidth: 120,
margin: '20 0 0 30'
},
items:[{
fieldLabel: '用戶名',
name: 'username'
},{
fieldLabel: '密 碼',
name: 'password',
inputType: 'password',
//改配置項必須設置為true,默認false
enableKeyEvents: true
}],
bbar:[{
text: '登錄',
action: 'login'
},{
text: '重置',
action: 'reset'
}]
}]
});

然后,對密碼框設置監聽事件,代碼:
Ext.define('Demo.controller.Controller', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'viewport > form textfield[name=password]':{
keypress: this.userLogin
}
})
},
userLogin:function(b,e,eOpts){
//e.getKey()是獲取按鍵的號碼,13代表是回車鍵
if(e.getKey() == 13){
Ext.Msg.alert('提示','您已經按下了回車鍵,可以在這里提交表單做登錄操作了... ...')
}
}
});
ExtJS鍵盤事件詳解:
1.首先要將需要監聽的輸入框設置為允許使用鍵盤事件(enableKeyEvents: true),否則鍵盤事件不可用;
2.使用getKey()方法判斷按鍵是否為自己設置的按鍵,具體按鍵號碼可參照ExtJS給出的api,然后做具體操作。
文章來源:ExtJS學習
