tesia
- 浏览: 32901 次
- 性别:
- 来自: 广州
-
最新评论
<!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（）
<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（）
- 大小: 12.7 KB
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2052Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1344JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 924服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1039服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 630<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 677<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 424<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 765<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 659<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 930<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1308<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 734Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 508<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 617函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 473<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 511<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 712<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 388Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 944<!DOCTYPE html PUBLIC " ... -
Ext.layout.container 标准布局类
2013-06-28 15:48 758<!DOCTYPE html PUBLIC " ...
相关推荐
8.3.1 为元素添加阴影：ext.shadow与ext.shadowpool / 418 8.3.2 为组件提供阴影和shim功能：ext.layer / 419 8.3.3 让组件实现浮动功能：ext.util.floating / 420 8.3.4 记录组件状态：ext.state.stateful / ...
`Ext.Element`是Ext Js中的基础元素操作类，它封装了对DOM元素的各种操作，如尺寸调整、样式修改、事件处理等。在`EXT核心API详解(三)-Ext.Element.txt`中，你将了解到如何选择元素、添加和移除CSS类、处理事件、...
6.13 Ext.KeyNav为元素提供简单的按键处理方法 6.13.1 实例化一个键盘绑定对象 6.13.2 废弃原有键盘绑定 6.13.3 将废弃的键盘绑定重新生效 6.14 Ext.KeyMap提供更灵活强大的对按键的处理方法 6.14.1 构造函数 ...
1. **Ext类**：EXT库的基础类，提供了许多实用的方法，如创建元素、事件处理等。 2. **Array类**：扩展了JavaScript原生的数组对象，提供了如each、indexOf、remove等功能，增强了数组操作能力。 3. **Number类**...
11.15 Ext.KeyNav处理导航按键............... 300 11.16 Ext.KeyMap为对象绑定按键功能.... 302 11.17 扩展...................................................... 304 11.17.1 扩展Date ..........................
"EXT核心API详解(三)-Ext.Element.txt"涵盖了Ext.Element，它是EXT中表示DOM元素的抽象层，提供了丰富的操作DOM元素的方法，如样式设置、尺寸调整、事件监听等。Ext.Element还引入了动画效果，使得对DOM元素的操作...
15、Ext.Fx类 …………………………… 16 16、Ext.KeyNav类 ……………………… 19 17、Ext.KeyMap类 …………………… 19 18、Ext.util.JSON类 ……………………… 20 19、Ext.util.Format类 ………………… 20 20...
最后，"EXT核心API详解(七)-Ext.KeyNav KeyMap JSON Format DelayedTask TaskRunner TextMetrics XTemplate.txt"涵盖了键盘导航（KeyNav）、键映射（KeyMap）等高级交互功能，JSON格式处理，延迟任务（DelayedTask）...
3. **Number 类**：增强了JavaScript的数字处理，提供了如Ext.Number.from()用于安全地转换值为数字，Ext.Number.round()进行四舍五入等。 4. **String 类**：扩展了字符串操作，例如Ext.String.format()用于格式化...
8. **Ext.KeyNav和KeyMap**：它们允许你为组件定义键盘导航规则，增强Web应用的可访问性。在“EXT核心API详解(七)-Ext.KeyNav KeyMap JSON Format DelayedTask TaskRunner TextMetrics XTemplate.txt”中，你将学习...
`Ext.KeyNav` 是EXTJS中用于处理键盘导航的类，它允许开发者为任何元素设置自定义的键盘快捷键。通过KeyNav，你可以轻松地为组件绑定键盘事件，例如导航、选择等。而`KeyMap`则是一个更基础的类，它允许开发者直接...
另外，使用`KeyNav`组件可以控制键盘导航，例如`<ext:KeyNav ID="keynav1" runat="server" Target="#{txtPassword}">`，并配置`Enter`或`Tab`等按键的行为。 这些是EXT.NET中常见的问题及其解决方法，它们涉及到...
#快速文件夹键导航（keynav） ＃＃描述 这是 Thunderbird 的附加组件，当文件夹树具有焦点时，它允许通过键入部分或全部文件夹名称来快速导航文件夹树。 ##获取附加组件 获得快速文件夹键导航的最简单方法是从 ...
它提供了丰富的功能和良好的用户体验，支持自定义插件来扩展其功能。本文将详细介绍TinyMCE插件开发的基础知识。 #### 二、TinyMCE插件开发基础 ##### 1. 插件目录结构 - **tiny_mce/plugins**：此目录包含了...
zh-cn.js中文化