1-8-键盘导航.doc

键盘导航控制鼠标指针来得快；二、用不了鼠标，可用性。 为了演示键盘完全控制，我们修改复杂布局的例子，并且增加“快捷键”，使得人们操作起来更快速流畅。 学习完这篇教程后，相信大家不但会懂得键盘导航的基本所需知识，而且还能够学习，如何利用KeyNav,KeyMap和FocusManager这几个类来联合实现键盘导航。 入门 例 complex.html 和 complex.js 文件。记得还要一份ExtJS4在同一目录底下，而且记住要改名为“ext”。 焦点管理器 焦点管理器提供键盘导航功能。只是一句如下： Ext.FocusManager.enable(true); 在Ext.onReady里调用即可传入一个true的布尔值表示要在表单的焦点区域显示聚焦框很快看出焦点在哪里。用户按下回车键可以进入应用程序，然后出入不同“层面”，按下回车表示下一步的层面，Esc 键表示返回上一层面。按下 Tab 键可以在处于同一水平相邻的几个元素之间来回切换。 纯粹的元素周围导航用 FocusManager 来做。但你可能会发现，某些无法访问（如 Grid），或在屏幕上得到相当繁琐。要解决这个我们采用“快捷方式”，这将允许用户在应用程序某些面板中作的轻松跳转。 是否要为面板而设置快捷键，看看是否满足以下的条件： 用得频率高不高？ 作为一个锚吗？操作是否符合直觉？ 如果答对了里面其中一项，都表示你可以替你的最终用户添加上命令的快捷方式。 KeyNav KeyNav 所负责的职责就是提供“导航键”部分的按键。所谓“导航键”，罗列如下： Enter Space Escape Tab Left Right Up Down Page Up Page Down Home EndDelete Backspace 不过请谨记，部分用户上的机子，却是没有某些键的，例如，苹果机用户便没有Page Up、Page Down、Del、Home或End键。var nav = Ext.create(Ext.util.KeyNav, my-element, { left : function(e){this.moveLeft(e.ctrlKey);}, right : function(e){this.moveRight(e.ctrlKey);}, enter : function(e){this.save();}, scope : this }); KeyNav 可以说为方向键而设的，于是我们把例子中本来用 tab、回车、esc 键控制的命令（切换不同的面板），转换为方向键控制的。var nav = Ext.create(Ext.util.KeyNav, Ext.getBody(), { left : function(){ var el = Ext.FocusManager.focusedCmp; if (el.previousSibling()) el.previousSibling().focus(); }, right : function(){ var el = Ext.FocusManager.focusedCmp; if (el.nextSibling()) el.nextSibling().focus(); }, up : function() { var el = Ext.FocusManager.focusedCmp; if (el.up()) el.up().focus(); }, down : function() { var el = Ext.FocusManager.focusedCmp; if (el.items) el.items.items[0].focus(); }, scope : this }); 当前我们通过 focusedCmp 来聚焦组件。这样，我们的应用程序就能更方便的控制起来了。下面我们进入键盘图部分，看看如何增加特殊功能的键。 KeyMap KeyMap对象元素，闭合的区域展开。var map = Ext.create(Ext.util.KeyMap, my-element, { key: 13, // or Ext.EventObject.ENTER ctrl: true, shift: false, fn: myHandler, scope: myObject }); 第一个配置项属性key是键对应的数值。下面两个配置项ctrl和shift，分别表示