Ext.KeyMap = function(el, config, eventName){

    this.el  = Ext.get(el);

    this.eventName = eventName || "keydown";

    this.bindings = [];

    if(config)...{ this.addBinding(config);  }//转换成回调函数  

    this.enable();//把上面转换成函数注册事件的监听中

};

点击展开示例
addBinding : function(config){

   if(Ext.isArray(config))...{ //数组，就找到每一个元素     ①

       for(var i = 0, len = config.length; i < len; i++)...{

            this.addBinding(config[i]);    }

       return;

    }

   var keyCode = config.key, shift = config.shift,        ②

       ctrl = config.ctrl, alt = config.alt,

       fn = config.fn || config.handler, scope = config.scope;

   if(typeof keyCode == "string")...{   //把字符串转换成数组  ③            

       var ks = [];

       var keyString = keyCode.toUpperCase();

       for(var j = 0, len = keyString.length; j < len; j++)...{

                ks.push(keyString.charCodeAt(j));  }

        keyCode = ks;

   }

   var keyArray = Ext.isArray(keyCode);

        

var handler = function(e)...{                         ④                

if((!shift||e.shiftKey)&&(!ctrl||e.ctrlKey)&&(!alt ||e.altKey))...{

        var k = e.getKey();//按键的key

        if(keyArray)...{                                 ⑤                            

           for(var i = 0, len = keyCode.length; i < len; i++)...{

             if(keyCode[i] == k)...{

                if(this.stopEvent)...{ e.stopEvent();}

                fn.call(scope || window, k, e);

                return;  }}}

else...{

          if(k == keyCode)...{                         ⑥        

             if(this.stopEvent)...{ e.stopEvent();}

             fn.call(scope || window, k, e);  }

         }

      }

};

this.bindings.push(handler);                             ⑦            

},
addBinding的config参数对象支持key/shift/ctril/alt/fn/handler/scope七个属性。其中shift/ctril/alt表明是否采用了组合键，如果为true则是采用了。key可以为string或数组。为多个非shift/ctril/alt按键注册触发当前指定元素的事件。fn/handle是同样的功能，只要使用一个，它就是按键触发的事件处理函数。scope是事件处理函数的作用域。

①可以看其支持数组的形式，如前面的例子。②则是config对象所支持的属性了，它支持七个参数。③把string的key转换成数组的形式。④是按键的事件处理函数。这个事件函数实质上是包裹了config中的fn/handle。其首先进行判断，如果指定了shift/ctril/alt一个键为true的话，那么事件e中就要有对应的keycode(如shiftKey)，没有的话就表明事件不满足当前的按键条件。满足的话，还要判断其它的非shift/ctril/alt按键是否也在指定的key的数组中，不在的话也不满足。如果都满足的话，那么调用注册的fn函数了。同时还要根据其stopEvent属性判断是否阻止默认的动作。

⑦则表明无论调用多少次这个函数都没有关系，它只是把转换的之后的回调函数写入this.bindings的数组中。如果注册监听时要用就到数组中去取。这也就是为什么说其config可以不在构建函数中传入的原因。

接下来我们看一下enable把这个包裹过的回调函数注册到指定元素的事件名上去：

它是通过调用el.on来完成注册监听，不过它的回调函数是handleKeyDown：
在handleKeyDown，它会遍历调用this.bindings中每一个函数。这样通过keyMap的整个流程就分析完成。我们可以通过其on函数来进行注册按键事件。我们来说明一下其使用方法：

函数名	使用说明
isEnabled	该keyMap注册的按键是否启用
enable	启用该keyMap注册的按键事件。
disable	禁用该keyMap注册的按键事件。
addBinding	它只有一个参数，这个参数是数组的话，就是注册多条配置对象，这个配置对象只要包括keyMap的七个配置项中一些就可以。
on	注册按键，它有三个参数，第一个参数是可以为字符形式的Ascill值或数组形式的数值，或含有配项的对象，第二个参数是函数，第三个是作用域

表4.5 keyMap的常用方法。

4.3.4注册导航键
在对按钮的应用中，还有很大一部分是对导航键的应用，如在表格的选择中，经常会采用上下方向键来进行上下移动高亮选择条到指定的行数。在编辑中，我们会采用pageup和pagedown进行定位到编辑的开始或结尾处。还在在Tree的应用中，我们也会采用上下左右方向键来进行导航。

导航的原理是很简单的，只要我们为元素注册如方向键之类的按键的keydown的监听函数就可以了。不过其中还是有一些问题是要注意。Ext.keyNav把所有的要做的事都帮我们做好了，我们只要简单的实现它给定的接口就可以。

这个接口就是在Ext.keyNav中注册"left","right","up","down","pageUp","pageDown","del","home","end", "enter", "esc","tab"这些函数中一些函数就可以了，如果指定的函数名注册了方法，那么在该元素之上按下相对应的键就会执行它。我们通过一个小例子来说明一下：
对于my-element元素，当用户按下left键时就会调用moveLeft方法，按下回车键时，就会调用save方法。我们来通过其构建函数分析一下它是怎么流转的。

它首先是找到指定的el元素，之后把config配置对象中所有项都应用到当前对象中来，接着它调用this.enable()方法进行注册事件监听函数。在这里this.disabled一般都是为false，因为在其prototype中默认是false。除非是在config中进行配置。在config中，我们不光是可以配置上面给出的十二个按键的接口，还可以配置disabled、defaultEventAction、和forceKeyDown。在代码中再具体去说明它们的用处。

现在我们要分析this.enable()方法，它完成注册keydown的事件：

这里先判断是当前组件是否禁用，只有在disabled之后才需要重新去注册监听。接下我们可以看到forceKeyDown，这是因为在IE中不会对keypress事件进行特殊键（即非字母数字键）进行冒泡。设定它为true会强迫它采用keydown事件来代替keypress事件。其实我们不要去管它，在enable中，对于IE和air，它都会自动采用keydown来进行处理。的而对于其它的浏览器，采用keypress进行注册。

我们要来看一下其调用其relay的方法，
这里keyToHandler是把left这样代表的键名和与其对应的键值对应起来。把event中传入的键值在这个keyToHandler的Hash表中找，看能不能找到对应的键名，找到了就运行当前keyNav中的注册的同名函数，每个键名默认是false。如果注册的函数返回false，就会调用指定的阻止默认缺省的方法，这个方法名是defaultEventAction配置项中指定，这里它默认是stopEvent。

导航键在组件中应用很多。在后面的章节，我们分别来讲解。

①②③④⑤⑥⑦⑧⑨⑨⑩

4.3.5鼠标按住事件
鼠标按住是按住一个元素多长时间后才执行给它注册的处理函数，比如有下拉的图标，习惯上不是点击就会展开来，而是按住它一定时间， 才会展开，这个在下拉菜单的按钮中是经常用到的。Ext.util.ClickRepeater就是用来进行这样的操作的，它的应场景不是很多。

Ext.util.ClickRepeater继承于observable类，这个类在下一节中将会讲到，继承于它就会得到事件能力。它有两个参数，第一个参数是指定元素，第二个参数是进行配置。具体要求的配置项如下：

配置项	说明
delay	指定的按下多长时间后才运行注册的处理函数
interval	和delay差不多，指定多长时间后才运行注册处理函数,20ms 默认
pressClass	鼠标按下的之后的CSS样式。
accelerate	为true时会，会出现先按下要长一点时间才运行，后按下短一点
preventDefault	阻止click默认的动作发生，默认是true.
stopDefault	阻止默认的动作发生和冒泡操作。默认是false.
handler	用来指定鼠按下一定时间后才执行的函数。

我们先来看一下其构建函数：

这个我们看出它注册了三个事件。一般来说都是使用click事件。当鼠标按下时就执行handleMouseDown函数。同时还默认地阻止元素click事件的默认动作发生。如果指定了handler，把它注册在当前的对象的click事件的监听函数。

接着从handleMouseDown函数起，它发生在元素被按下的那一刻。

按下了鼠标，该元素首先失去焦点，同时把指定的按下的样式应用到当前元素。注册鼠标键松开时和移出当前元素的事件。最后按指定的时间来延迟运行click方法。
click中就是执行当前类的click的事件监听函数。如果指定handler,也就是注册在这个事件上，对于一般的使用该类，都是使用click事件注册监听来进行按下的功能处理。handleMouseUp是先判断如果没有执行指定的click的注册函数就取消，这就是还没有按到一定的时间就松开了键。它剩下要做就是恢复没有按下时的样式和删除在handleMouseDown中注册的事件。

在handleMouseOut中的处理有点不同，它也是恢复没有按下时的样式和没有执行指定的click的注册函数就取消，但是它注册了一个mouseover，接下来如果再次经过这个元素，不要按下就会触发click中注册的函数。

这个类在ToggleButton中有应用 .