1-8-键盘导航.docVIP

键盘导航键盘要比控制鼠标指针来得快；二、对高级用户和用不了鼠标的用户，键盘更具可用性。为了演示键盘完全控制，我们修改了复杂布局的例子，并且增加“快捷键”，使得人们操作起来更快速流畅。学习完这篇教程后，相信大家不但会懂得键盘导航的基本所需知识，而且还能够学习，如何利用KeyNav,KeyMap和FocusManager这几个类来联合实现键盘导航。入门本例设计 complex.html 和 complex.js 文件。记得还要一份ExtJS4在同一目录底下，而且记住要改名为“ext”。焦点管理器焦点管理器提供键盘导航功能。只是一句如下：Ext.FocusManager.enable(true);在Ext.onReady里调用即可，传入一个true的布尔值表示要在表单的焦点区域显示聚焦框，以便很快看出焦点在哪里。用户按下回车键可以进入应用程序，然后出入不同“层面”，按下回车表示下一步的层面，Esc 键表示返回上一层面。按下 Tab 键可以在处于同一水平的相邻的几个元素之间来回切换。 纯粹的元素周围导航用 FocusManager 来做。但你可能会发现，某些区域可能无法访问（如 Grid），或在屏幕上得到相当繁琐。要解决这个我们采用“快捷方式”，这将允许用户在应用程序某些面板中作的轻松跳转。是否要为面板而设置快捷键，看看是否满足以下的条件：l 用得频率高不高？ l 作为一个锚吗？-到偏远地方的垫脚石？l 操作是否符合直觉？ 如果答对了里面其中一项，都表示你可以替你的最终用户添加上命令的快捷方式。KeyNavExt应用中可以使用一下键盘导航：KeyNav 所负责的职责就是提供“导航键”部分的按键。所谓“导航键”，罗列如下：Enter Space Escape TabLeft 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.items0.focus(); , scope : this);当前我们通过 focusedCmp 来聚焦组件。这样，我们的应用程序就能更方便的控制起来了。下面我们进入键盘图部分，看看如何增加特殊功能的键。 KeyMapKeyMap对象来定位元素，并将闭合的区域展开。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，分别表示要不要同时按下形成组合键的意思。这个例子中设ctrl是需要的。所以，按下了ctrl+回车就会执行 myHandler函数。该项可以是inline或者函数的引用。最后，scope就是定义KeyMap在哪里有效。 单个按键对应一个函数，KeyMap处理起来毫无问题，多个按键对应同一函数，KeyMap亦能胜任。如果我们有多个键对应 myHandler 函数，比如我们说 10,13。首先来测试下主面板导航：北部，南部，东部和西部。先看展开函数：当面板展开的时候，该面板的元素会自动获得焦点；当面板闭合的时候，其上级对象，即viewport，会获得焦点。function expand(parentPanel) parentPanel.toggleCollapse(); parentPanel.on(expand, function()parentPanel.el.focus();); parentPanel.on(collapse, function()viewport.el.focus(););具体实现：Ext.EventObject.X 就是指向我们侦听的键。var map = Ext.create(Ext.util.KeyMap, Ext.getBody(), key: Ext.EventObject.E, / E for east shift: true, ctrl: false, / explicitly set as false to avoid collisions fn: function() var parentPanel = eastPanel; expand(parentPanel); , key: Ext.EventObject.W, / W for west shift: true, ctrl: false, fn: function() var parentPanel = westPanel; expand(parentPanel); , key: Ext.EventObject.S, / S for south shift: true, ctrl: false, fn: function() var parentPanel = southPanel; expand(parentPanel); );如此类推，我们在西边的面板上执行导航、设置和信息的操作。我们已经知道parentPanels，为避免命名冲突，我称它们“子面板 subPanels”。 key: Ext.EventObject.S, / S for settings ctrl: true, fn: function() var parentPanel = westPanel; var subPanel = settings; expand(parentPanel, subPanel);, key: Ext.EventObject.I, / I for information ctrl: true, fn: function() var parentPanel = westPanel; var subPanel = information; expand(parentPanel, subPanel);, key: Ext.EventObject.N, / N for navigation ctrl: true, fn: function() var parentPanel = westPanel; var subPanel = navigation; expand(parentPanel, subPanel);expand 函数修改如下：function expand(parentPanel, subPanel) if (subPanel) function subPanelExpand(subPanel) subPanel.on(expand, function() /设置expand侦听函数setTimeout(function() subPanel.focus(); , 200); ); subPanel.expand();/展开子面板 if (parentPanel.collapsed) /父面板未展开 parentPanel.expand();/展开 subPanelExpand(subPanel); else if (!subPanel.collapsed) 父面板、子面板均已展开 subPanel.focus(); else subPanelExpand(subPanel); else /没有子面板 parentPanel.toggleCollapse();parentPanel.on(expand,function()parentPanel.el.focus(););parentPanel.on(collapse,function()viewport.el.focus();); 事件侦听器 expand 中执行了聚焦的行为，也就是说面板展开后才执行 focus，它需要包装在setTimeout中,延时200毫秒解决过早在面板还小的时候聚焦，而parentPanels则没有这个问题。 你现在可以用键盘（如 Shift + E或 Ctrl + S）打开和关闭面板，以及单纯的。当然，任何按键事件都可以触发任意的 Ext JS 的函数，使得应用程序有更自然感觉。最后我们加入 KeyMap 对象，这里有两张 Tab 面板，一个在 Center 面板中，另一个在 “Eye Data”面板旁边。要是我们能够像在浏览器中关闭 tab 面板就很有用了，也就是ctrl+w。 key: Ext.EventObject.W, / W to close ctrl: true,fn: function() /获取到了当前焦点所在的组件 var el = Ext.FocusManager.focusedCmp; if (el.xtype = tab & el.closable) el.up().focus(); el.destroy(); , scope: this在Grid中使用键盘var easttab = Ext.getCmp(easttab);var gridMap = Ext.create(Ext.util.KeyMap, eastPanel, key: r, / Return key fn: function() easttab.getSelectionModel().setCurrentPosition(row: 0, column: 1); , scope: eastPanel , key: Ext.EventObject.ESC, fn: function() easttab.el.focus(); , scope: eastPanel );开关键盘映射KeyMap 一项有用的功能就是轻松地启用或关闭。比如说，当您的应用程序的大多数用户点击一个元素的时候却不想出现聚焦框，你可以做一个按钮来（或其他键盘映射）激活这种行为。添加一个全局性的按键，打开和关闭键盘导航：var initMap = Ext.create(Ext.util.KeyMap, Ext.getBody(), key: Ext.EventObjec