Extjs 绑定键盘事件其实是很简单，直接创建键盘对象，绑定句柄，就玩事了，可是，总或多或少有些问题，让后找度娘，辛苦良久...
extjs 中绑定键盘事件关键是两个类：1.Ext.util.KeyMap 2.Ext.EventObject
1中载有绑定事件的所有操作 ，2中含有键盘上所有的键位
而且绑定键盘事件，必须获取鼠标的焦点才生效，且如果在多个相同类型的form下，是要设置
, autoEl: {
tag: 'div',
tabindex: 0
}
下面是我对form绑定事件，而且使用 Ext.getCmp("form").focus();，让页面一出现就会获取鼠标焦点！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../../ClientLibs/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../ClientLibs/extjs/ext-all.js"></script>
<script type="text/javascript" src="../../../ClientLibs/extjs/ux/ux-all.js"></script>
<script type="text/javascript" src="../../../ClientLibs/extjs/ext-lang.js"></script>
<script type="text/javascript" src="model.js"></script>
<title>用户登录</title>
<style type="text/css">
.bg{
background-color: #9BC9EB;
}
.bg-form{
background-color:#9AB3DD ;
background-image:url("../../../Sys/images/lock.png");
background-repeat: no-repeat;
background-position: 95% center ;
}
input[type="text"],input[type="password"]:focus{
background: beige;
}
</style>
</head>
<script type="text/javascript">
//var block = 'user_loginuser_login';
Ext.onReady(function () {
var myHandler= function () {
var form = Ext.getCmp("form");
if (form.isValid()) {
var user = Ext.create("LoginUserModel", {
"Name": Ext.getCmp("userName").getValue()
, "Password": Ext.getCmp("password").getValue()
, "NewPassword": Ext.getCmp("password").getValue()
});
user.save({
failure: function () {
Ext.MessageBox.alert("提示！", "登录失败！");
}
, callback: function (o, p, s) {
if (s) {
var response = Ext.decode(p.response.responseText)
var staus = response["Data"];
switch (staus.toString()) {
case "0":
window.location = "../../../index.htm";
break;
case "1":
Ext.MessageBox.alert("提示！", "密码不正确");
break;
case "2":
Ext.MessageBox.alert("提示！", "用户不存在");
break;
case "3":
Ext.MessageBox.alert("提示！", "需要修改初始密码");
break;
case "4":
Ext.MessageBox.alert("提示！", "该用户锁定");
break;
}
}
}
});
}
} ;
var viwport = Ext.create("Ext.Viewport", {
layout: "border"
, cls: "bg"
, style: {
// marginLeft: "320px"
}
, items: [
{
xtype: "container"
, style: {
marginTop: "0%"
, marginBottom: "2%"
}
, height: 100
, html: "<h1 style='margin-left: 470px'><img src='../../../Sys/images/company.png' style='vertical-align:-20px'/>东莞隽思印刷有限公司</h1>"
, region: "north"
}
, {
xtype: "form"
, id: "form"
, 600
, height: 300
, regin: "center"
, bodyCls: "bg-form"
, defaults: {
labelWidth: 60
, labelPad: 5
, labelAlign: "right"
, style: {
marginTop: "5%"
, marginLeft: "6%"
}
}
// , autoEl: {
// tag: 'div',
// tabindex: 0
// }
, style: {
marginLeft: "320px"
}
, layout: {
type: 'table',
columns: 2
}
, items: [
{
xtype: "container"
, colspan: 2
, html: "<h2 style='text-align: center;color:#015595 '>用户登录</h2>"
}
, {
xtype: "textfield"
, fieldLabel: "用户名"
, id: "userName"
, allowBlank: false
, blankText: "登录名不能为空！"
, 300
, colspan: 2
}
, {
xtype: "textfield"
, fieldLabel: "密 码"
, id: "password"
, 300
, allowBlank: false
, blankText: "密码不能为空！"
, style: {
marginLeft: "9.5%"
, marginTop: "5%"
}
, inputType: "password"
}
, {
xtype: "container"
, 150
, style: {
marginLeft: "32px"
}
, html: "<a href='../ChangeWord/edit.htm' target='_blank' style='text-decoration: none;vertical-align: -20px'>修改密码</a>"
}
, {
xtype: "container"
, layout: {
type: 'table',
columns: 2
}
, items: [{
xtype: "button"
,id:"btnlogin"
, text: "登录"
, 90
, height: 30
,listeners:{
beforerender:function(cmp){
}
}
, style: {
marginLeft: "87%"
}
, handler:myHandler
}
, {
xtype: "button"
, text: "撤销"
, 90
, height: 30
, style: {
marginLeft: "97%"
}
, handler: function () {
Ext.getCmp("form").getForm().reset();
}
}]
}
, {
xtype: "container"
, 150
, html: "<a href='../edit.htm' target='_blank' style='text-decoration: none;margin-left:2px;vertical-align: -20px'>注册用户</a>"
}
]
}
]
});
Ext.create('Ext.util.KeyMap', {
target:"form"
,key: Ext.EventObject.ENTER,
fn:myHandler
});
Ext.getCmp("form").focus();
});
</script>
<body ></body>
</html>