Extjs 단축키 지정

기본적인 DOMQuery에 대해 알아봤으므로 쿼리해온 DOM에 단축키를 지정해 봅니다!

 

KeyMap이라는 클래스를 사용해서 각각의 요소에 단축키를 적용 할 수 있습니다.

1. 사용방법
Edit section

var map = new Ext.KeyMap('오브젝트아이디', {
      key : 13,   // 13은 Enter 키입니다....
      fn : handler,   // 이벤트가 적용되었을 때 실행될 함수
      scope : obj    // 여긴 적용될 객체 영역입니다.
});

위와 같은 형태로 객체를 생성하면  '아이디' 를 가지고 있는 element에서 Enter키(13번) 이 눌러지면 handler를 실행합니다..



2. key 이벤트 속성 지정하기
Edit section


위에서 사용 되었던 key 속성과 몇가지 키이벤트에 관련된 속성을 더 알아보겠습니다.

   

key : 적용되어질 키 문자열 입니다.
           ex),   특수키로 적용 할 경우    : [13, 10]      - Enter키와 Esc 키 둘 중 하나입니다.
                    문자로 적용 할 경우       :  "abc"        - a, b, c 키 중에 하나 입니다.
    ctrl  : control 키 적용 여부 입니다.
             true이면 control 키를 누른 상태이고 false이면 누르지 않은 상태입니다.
    alt  :  alter 키 적용 여부입니다. 사용은 ctrl과 같습니다.
    shift : shift 키 적용 여부입니다. 사용은 ctrl과 같습니다.

3. 여러개의 단축키 동시 지정
Edit section

var map = new Ext.KeyMap('아이디', []);
위와 같은 형태로 1에서 했던 이벤트 속성들을 배열로 넣어 줍니다.

var map = new Ext.KeyMap('아이디', [
    {
         key : 13,
         fn : function () { alert('Enter키를 눌렀습니다.'); },
         scope : this
     },
    {
         key : "abc",
         fn : function () { alert('a, b, c 중 하나의 키를 눌렀네요'); },
         scope : this
     },
    {
         key : "a",
         shift : true,
         alt : true,
         fn : function () {  alert('shift + alt + a 키를 동시에 누르셨습니다. '); } ,
         scope : this
    }
]);

이와 같이 배열 형태로 이벤트를 여러개를 지정하면 '아이디' 객체에 저런 이벤트가 발생할 때마다 함수들을 실행하게 될 것입니다.