Ext.KeyNav替元素提供简单的按键处理方法示例
Ext.KeyNav为元素提供简单的按键处理方法示例
<!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" />
<title>Ext.KeyNav为元素提供简单的按键处理方法示例</title>
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
title:'Ext.KeyNav示例',
frame:true,
renderTo:'sub1',
width:'300px',
html:"<div id='div1' style='width:200px;height:200px;padding:10px;'>"+
"<div id='id01' style='background-color:#3399FF;height:20px;'"+
"请点击我，然后<br>按键盘 enter键</div>"
});
var el=Ext.get("id01");//绑定事件
var nav=new Ext.KeyNav(el,{
"left":function(e){
Ext.Msg.alert('提示','向左的按键被按下');
//alert('向左的按键被按下了');
},
"right":function(e){
alert('向右的按键被按下了');
},
"enter":function(e){
alert("'回车键被按下了'");
},
scope:el
});
nav.enable(); //Ext.KeyNav.enable将失效的键盘绑定事件生效,反之Ext.KeyNav.disable()是废弃已绑定的配置
//都是公有方法，调用时通过实例化Ext.KeyNav后即可调用
});
</script>
</head>
<body>
<div id="sub1"></div>
</body>
</html>
---------------------------------------------
Ext.KeyMap提供更灵活强大的对按键的处理方法
一个键值可以被映射到多个操作控制上，它的构造器支持config对象来作为详细绑定定义。
在将回调函数绑定到KeyMap对象时，KeyMap随时将会触发期望的组合键的函数签名。
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
title:'Ext.KeyNav示例',
frame:true,
renderTo:'sub1',
width:'300px',
html:"<div id='div1' style='width:200px;height:200px;padding:10px;'>"+
"<div id='id01' style='background-color:#3399FF;height:20px;'"+
"请点击我，然后<br>按键盘 enter键</div>"
});
var el=Ext.get("id01");
var map=new Ext.KeyMap(el,{
key:Ext.EventObject.ENTER,
fn:handleKey,
scope:this
});
map.addBinding({ //绑定一个设置对象到KeyMap实例
key:'abc',
shift:true,
fn:handleKey,
scope:this
});
//表示当按下shift+abc时调用的函数handleKey
function handleKey(){
Ext.Msg.alert("the abc+shift key is touch success!");
}
});
</script>
加入一个新的绑定配置到绑定对象
map.addBinding（）
<!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" />
<title>Ext.KeyNav为元素提供简单的按键处理方法示例</title>
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
title:'Ext.KeyNav示例',
frame:true,
renderTo:'sub1',
width:'300px',
html:"<div id='div1' style='width:200px;height:200px;padding:10px;'>"+
"<div id='id01' style='background-color:#3399FF;height:20px;'"+
"请点击我，然后<br>按键盘 enter键</div>"
});
var el=Ext.get("id01");//绑定事件
var nav=new Ext.KeyNav(el,{
"left":function(e){
Ext.Msg.alert('提示','向左的按键被按下');
//alert('向左的按键被按下了');
},
"right":function(e){
alert('向右的按键被按下了');
},
"enter":function(e){
alert("'回车键被按下了'");
},
scope:el
});
nav.enable(); //Ext.KeyNav.enable将失效的键盘绑定事件生效,反之Ext.KeyNav.disable()是废弃已绑定的配置
//都是公有方法，调用时通过实例化Ext.KeyNav后即可调用
});
</script>
</head>
<body>
<div id="sub1"></div>
</body>
</html>
---------------------------------------------
Ext.KeyMap提供更灵活强大的对按键的处理方法
一个键值可以被映射到多个操作控制上，它的构造器支持config对象来作为详细绑定定义。
在将回调函数绑定到KeyMap对象时，KeyMap随时将会触发期望的组合键的函数签名。
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
title:'Ext.KeyNav示例',
frame:true,
renderTo:'sub1',
width:'300px',
html:"<div id='div1' style='width:200px;height:200px;padding:10px;'>"+
"<div id='id01' style='background-color:#3399FF;height:20px;'"+
"请点击我，然后<br>按键盘 enter键</div>"
});
var el=Ext.get("id01");
var map=new Ext.KeyMap(el,{
key:Ext.EventObject.ENTER,
fn:handleKey,
scope:this
});
map.addBinding({ //绑定一个设置对象到KeyMap实例
key:'abc',
shift:true,
fn:handleKey,
scope:this
});
//表示当按下shift+abc时调用的函数handleKey
function handleKey(){
Ext.Msg.alert("the abc+shift key is touch success!");
}
});
</script>
加入一个新的绑定配置到绑定对象
map.addBinding（）