Extjs-实用工具为对象绑定按键功能 Ext.KeyMap

本文介绍了Ext.KeyMap的基本用法，包括如何为单个按键绑定事件处理函数，如何为多个按键设置相同的监听器，以及如何实现组合按键的功能。通过示例展示了如何使用Ext.KeyMap调整文本区域的宽度和高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Ext.KeyMap为对象绑定按键功能

Ext.KeyNav我们只能处理12种按键,要想处理更多的按键就需要Ext.KeyMap,它对键盘上每个按键都做了映射,可以使用它任意一个按键的处理函数

代码

<script type='text/javascript'>
	Ext.onReady(function(){
		var km = new Ext.KeyMap('textarea',[{
			key : Ext.EventObject.LEFT,
			fn : function(e){
				km.el.setWidth(km.el.getWidth()-10);
			}
		},{
			key : Ext.EventObject.RIGHT,
			fn : function(e){
				km.el.setWidth(km.el.getWidth()+10);
			}
		},{
			key : Ext.EventObject.UP,
			fn : function(e){
				km.el.setHeight(km.el.getHeight()-10);
			}
		},{
			key : Ext.EventObject.DOWN,
			fn : function(e){
				km.el.setHeight(km.el.getHeight()+10);
			}
		}]);
		Ext.get('dis').on('click', function() {
	        km.disable();
	        Ext.get('result').update(km.isEnabled());
	    });
	    Ext.get('en').on('click', function() {
	        km.enable();
	        Ext.get('result').update(km.isEnabled());
	    });
		
	});
</script>
   </head>
   <body>
   		<button id='dis'>disable</button>
    	<button id='en'>enable</button>
    	<br/>
    	<span id='result'></span>
    	<br/>
	    <textarea id='textarea'></textarea>
   </body>
</html>

2.Ext.KeyMap支持一次为多个按键事件设置同一个监听器

<script type='text/javascript'>
	Ext.onReady(function() {
	    var keyMap = new Ext.KeyMap('textarea', {
	        //key: [Ext.EventObject.ENTER, Ext.EventObject.BACKSPACE, Ext.EventObject.SPACE],
	        key: 'abcd',
	        fn: function(e) {
	            keyMap.el.setStyle('backgroundColor', 'red');
	            var fn = function(){
	                keyMap.el.setStyle('backgroundColor', 'white');
	            };
	            fn.defer(1000);
	        }
	    });
	});
</script>
   </head>
   <body>
	    <textarea id='textarea'></textarea>
   </body>
</html>

3.组合按键

<script type='text/javascript'>
	Ext.onReady(function() {
	  	var keyMap = new Ext.KeyMap('textarea', [{
	        key: Ext.EventObject.LEFT,
	        ctrl: true,
	        fn: function(e) {
	            keyMap.el.setWidth(keyMap.el.getWidth() - 10);
	        }
	    },{
	        key: Ext.EventObject.RIGHT,
	        ctrl: true,
	        fn: function(e) {
	            keyMap.el.setWidth(keyMap.el.getWidth() + 10);
	        }
	    },{
	        key: Ext.EventObject.UP,
	        ctrl: true,
	        fn: function(e) {
	            keyMap.el.setHeight(keyMap.el.getHeight() - 10);
	        }
	    },{
	        key: Ext.EventObject.DOWN,
	        ctrl: true,
	        fn: function(e) {
	            keyMap.el.setHeight(keyMap.el.getHeight() + 10);
	        }
	    }]);
	});
</script>
   </head>
   <body>
	    <textarea id='textarea'></textarea>
   </body>
</html>