웹 UI 프레임워크에서 키보드 단축키 추가

웹 UI 프레임워크에서는 UI 구성품목에서 키보드 단축키를 추가할 수 있습니다. 예를 들어 검색 패널에서 검색 버튼으로 CTRL+ALT+s와 같은 키보드 단축키를 추가할 수 있습니다.

트리거 키는 대소문자를 구문하지 않습니다. CTRl+ALT+S를 누를 경우 CTRL+ALT+s를 누르는 경우와 효과는 동일합니다.

키보드 단축키를 추가하려면 특정 Ext 구성품목에 대한 설정을 정의할 때 트리거 구성 옵션을 추가해야 합니다. 트리거 구성 파라미터는 다음 프로퍼티를 포함합니다.

triggerKey
단축키를 구성하는 키의 시퀀스입니다.
triggerFn
해당 구성품목에서 단축키를 누를 때 수행해야 하는 액션입니다. 예를 들어 단축키로 검색을 트리거하려는 경우 doSearch를 사용합니다.
triggerFnScope(선택사항)
트리거 함수를 호출해야 하는 범위를 정의합니다. 기본적으로 범위는 현재 구성품목입니다.
triggerKeySeparator(선택사항)
단축키에 대해 키가 정의된 경우 시퀀스 분리에 사용할 분리자 키입니다. 기본적으로 "+"를 구분자 키로 사용합니다.

예를 들어 검색 패널에서 검색 버튼에 대해 CTRL + ALT + S 단축키를 사용하려는 경우, 검색 패널의 구성은 다음과 비슷합니다.

items: [{ 
             xtype: "panel", 
               . . . 
               . . . 
               . . . 
             }, 
             buttons: [{ 
                . . . 
                . . . 
                . . . 
                     handler: this.doSearch, 
                     scope: this 
              }] 
             triggers: [{ 
                 triggerkey: "Ctrl + Alt + s", 
                 triggerFn: this.doSearch, 
                 triggerFnScope: this, 
                 triggerKeySeparator: "+" 
              }] 
           }]

트리거 구성 파라미터는 오브젝트 배열을 포함할 수 있습니다. 예를 들어 위 예제의 경우 검색 패널에서 재설정 버튼에 대해 키보드 단축키를 정의하려는 경우 트리거 구성 파라미터는 다음과 유사합니다.

triggers: [{ 
                 triggerkey: "Ctrl + Alt + s", 
                 triggerFn: this.doSearch, 
                 triggerFnScope: this, 
                 triggerKeySeparator: "+" 
              }, 
              { 
                 triggerkey: "Ctrl + Alt + r", 
                 triggerFn: this.doReset, 
                 triggerFnScope: this, 
                 triggerKeySeparator: "+" 
         }]