Extjs-实用工具 为对象绑定按键功能 Ext.KeyMap
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>