Ext.KeyNav为元素提供简单的按键处理方法示例

最新推荐文章于 2018-07-18 22:31:23 发布

最新推荐文章于 2018-07-18 22:31:23 发布 · 232 阅读

文章标签：

#Ext.KeyNav

ExtJs 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了Ext.KeyNav和Ext.KeyMap两种处理按键事件的方法。Ext.KeyNav提供了简单的按键处理方式，而Ext.KeyMap则更为灵活强大，支持多种按键组合及事件绑定。

部署运行你感兴趣的模型镜像

<!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");//绑定事件
[color=red] var nav=new Ext.KeyNav(el,{[/color]
"left":function(e){
Ext.Msg.alert('提示','向左的按键被按下');
//alert('向左的按键被按下了');
},
"right":function(e){
alert('向右的按键被按下了');
},
"enter":function(e){
alert("'回车键被按下了'");
},
scope:el
});
[color=red] nav.enable(); //Ext.KeyNav.enable将失效的键盘绑定事件生效,反之Ext.KeyNav.disable()是废弃已绑定的配置[/color]
//都是公有方法，调用时通过实例化Ext.KeyNav后即可调用

});
</script>
</head>

<body>
<div id="sub1"></div>

</body>
</html>
---------------------------------------------------------------------------------
[color=red]Ext.KeyMap提供更灵活强大的对按键的处理方法[/color]
一个键值可以被映射到多个操作控制上，它的构造器支持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");
[color=red] var map=new Ext.KeyMap(el,{
key:Ext.EventObject.ENTER,
fn:handleKey,
scope:this
});[/color]
[color=red] map.addBinding({ //绑定一个设置对象到KeyMap实例[/color]
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（）

您可能感兴趣的与本文相关的镜像