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>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

BeanUtils에서 맵을 개체로 직접 캡슐화

폼에서 제출한 데이터를 대상에 봉인하는 것이 필요합니다 대상order 프론트 데스크톱 페이지:name 속성과 대상 속성이 일일이 대응합니다 웹 층 봉인 프론트 데스크톱의 데이터를 키 값 대 맵에 저장합니다 Map m...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Extjs - 유틸리티 객체에 대한 키 바인딩 기능 Ext.KeyMap

좋은 웹페이지 즐겨찾기