ExtJS4.1 정보: 단축키 support_javascript 기술 관련 문제

질문: 페이지에 두 개의 패널이 있는데 둘 다 [추가(F2)] 버튼을 지원합니까? 그림 표시

첫 번째 구현
ExtJ는 단축키를 쉽게 지원하는 "Ext.util.KeyMap"을 제공하므로 매우 간단할 것 같습니다.
코드 예시

코드 복사 코드는 다음과 같습니다.

/ // < ;reference path="Ext/ext-all-debug-w-comments.js" />

Ext.onReady(function () {

var viewport = Ext. create(' Ext.container.Viewport', {
레이아웃: {
유형: 'vbox',
정렬: 'stretch'
},
패딩: 10,
항목 : [{
xtype: 'panel',
id: 'panelA',
title: '단축키 테스트 A',
tbar: [{
Text: '추가(F2) '
                                                                                                                                                                                           x 유형: ' panel',
id: 'panelB',
title: '단축키 테스트 B',
tbar: [{
text: '추가(F2)'
}],
프레임: true,
flex: 1,
html: '안녕하세요, 여기에 표시된 테이블 또는 양식입니다.'
}]
});

Ext.create('Ext.Util.Keymap', {
target:' Panela ',
key: ext.eventobject.f2,
Fn: Function(key, EV) {
경고(' 추가 '); KeyMap', {
대상: 'panelB',
키: Ext.EventObject.F2,
fn: 함수(key, ev) {
경고('Add B');

ev.stopEvent();

return false;
}
});
})


실제 결과

브라우저를 연 후 F2를 직접 눌러도 효과가 없습니다. 브라우저를 열고 마우스로 A 또는 B를 클릭한 다음 F2를 눌러도 효과가 없습니다.

두 번째 구현

div 요소에 tabindex=0 속성을 추가해야 하는 것으로 나타났습니다.
코드 예시

코드 복사


코드는 다음과 같습니다.

///

Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
padding : 10,
항목: [{
바: [{
텍스트: '추가(F2)'
          }],
                       프레임: true,                        ~                        . autoEl : {
태그: 'div',
tabindex: 0
}
}, {
XType: 'Panel',
ID: 'Panelb',
Title: '단축키 테스트 B',
tbar: [{
text: '추가(F2)'
  }],
프레임: true,
 flex: 1,
html: '안녕하세요, 테이블 또는 양식입니다. 여기에 표시됩니다.',
                                                                                                                               }]
});

Ext.create('Ext.util.KeyMap', {
대상: 'panelA',
키: Ext .EventObject.F2,
fn: function (key, ev) {
          Alert('Add A') 🎜> Ext. Create ('EXT.UTIL.KEYMAP', {
Target: 'Panelb ',
Key: Ext.eventobject.f2,
Fn: Function(key, EV) {
Alert('Add to B');

ev.stopEvent();

false 반환;
}
});
});


실제 결과
브라우저를 연 후 바로 F2를 누르면 아무런 효과가 없습니다. 브라우저를 열고 마우스로 A 또는 B를 클릭한 다음 F2를 누르면 효과가 나타납니다.

세 번째 구현
브라우저를 연 후 div를 클릭하지 않고도 단축키를 인식하는 문제를 해결하려면 foucs() 메서드를 수동으로 호출해야 합니다.
코드 예시

코드 복사 코드는 다음과 같습니다.

///

Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
padding : 10,
항목: [{
바: [{
텍스트: '추가(F2)'
          }],
                       프레임: true,                        ~                        . autoEl : {
태그: 'div',
tabindex: 0
}
}, {
XType: 'Panel',
ID: 'Panelb',
Title: '단축키 테스트 B',
tbar: [{
text: '추가(F2)'
  }],
프레임: true,
 flex: 1,
html: '안녕하세요, 테이블 또는 양식입니다. 여기에 표시됩니다.',
                                                                                                                               }]
});

Ext.create('Ext.util.KeyMap', {
대상: 'panelA',
키: Ext .EventObject.F2,
fn: function (key, ev) {
          Alert('Add A') 🎜> Ext. Create ('EXT.UTIL.KEYMAP', {
Target: 'Panelb ',
Key: Ext.eventobject.f2,
Fn: Function(key, EV) {
Alert('Add to B');

ev.stopEvent();

false 반환;
}
});

Ext.get('panelB').focus();
});


실제 결과
브라우저를 열고 F2를 직접 누르면 효과가 나타납니다. 브라우저를 열고 마우스로 A 또는 B를 클릭한 다음 F2를 누르면 작동합니다.