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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值