블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

Extjs 단축키 지정

Scripter/EXTJS / 2008. 2. 18. 19:21
기본적인 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
    }
]);



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

'Scripter > EXTJS' 카테고리의 다른 글

Extjs Qtips 사용하기  (0) 2008.02.18
Extjs Template 사용하기  (0) 2008.02.18
Extjs 기본 DomQuery  (0) 2008.02.18
Extjs 초보자를 위한 애플리케이션 레이아웃(2.02)  (8) 2008.02.17
Extjs scope에 대한 고찰  (2) 2008.02.17
Post by 넥스트리소프트 데꾸벅(techbug)
, |