Question about ExtJS4.1: Support for shortcut keys

Question one page has two panels with a [add (F2)] button. How do I support the shortcut key? Image Diagram

First implementation
It should be very simple. ExtJs provides "Ext. util. KeyMap", which is easy to support shortcut keys.
Sample Code
Copy codeThe Code is as follows:
/// <Reference path = "Ext/ext-all-debug-w-comments.js"/>

Ext. onReady (function (){

Var viewport = Ext. create ('ext. container. viewport ',{
Layout :{
Type: 'vbox ',
Align: 'stretch'
},
Padding: 10,
Items :[{
Xtype: 'panel ',
Id: 'panela ',
Title: 'test keypa ',
Tbar :[{
Text: 'add (F2 )'
}],
Frame: true,
Flex: 1,
Html: 'Hello, the table or form shown here. '
},{
Xtype: 'panel ',
Id: 'panelb ',
Title: 'test B with a shortcut key ',
Tbar :[{
Text: 'add (F2 )'
}],
Frame: true,
Flex: 1,
Html: 'Hello, the table or form shown here. '
}]
});

Ext. create ('ext. util. keymap ',{
Target: 'panela ',
Key: Ext. EventObject. F2,
Fn: function (key, ev ){
Alert ('add ');

Ev. stopEvent ();

Return false;
}
});

Ext. create ('ext. util. keymap ',{
Target: 'panelb ',
Key: Ext. EventObject. F2,
Fn: function (key, ev ){
Alert ('add B ');

Ev. stopEvent ();

Return false;
}
});
});

Actual results

Pressing F2 directly after opening the browser has no effect. Clicking A or B with the mouse after opening the browser has no effect.
Second Implementation
It turns out that the div element must add the tabindex = 0 attribute.
Sample Code
Copy codeThe Code is as follows:
/// <Reference path = "Ext/ext-all-debug-w-comments.js"/>

Ext. onReady (function (){

Var viewport = Ext. create ('ext. container. viewport ',{
Layout :{
Type: 'vbox ',
Align: 'stretch'
},
Padding: 10,
Items :[{
Xtype: 'panel ',
Id: 'panela ',
Title: 'test keypa ',
Tbar :[{
Text: 'add (F2 )'
}],
Frame: true,
Flex: 1,
Html: 'Hello, the table or form shown here. ',
AutoEl :{
Tag: 'div ',
Tabindex: 0
}
},{
Xtype: 'panel ',
Id: 'panelb ',
Title: 'test B with a shortcut key ',
Tbar :[{
Text: 'add (F2 )'
}],
Frame: true,
Flex: 1,
Html: 'Hello, the table or form shown here. ',
AutoEl :{
Tag: 'div ',
Tabindex: 0
}
}]
});

Ext. create ('ext. util. keymap ',{
Target: 'panela ',
Key: Ext. EventObject. F2,
Fn: function (key, ev ){
Alert ('add ');

Ev. stopEvent ();

Return false;
}
});

Ext. create ('ext. util. keymap ',{
Target: 'panelb ',
Key: Ext. EventObject. F2,
Fn: function (key, ev ){
Alert ('add B ');

Ev. stopEvent ();

Return false;
}
});
});

Actual results
It is ineffective to press F2 directly after opening the browser. After opening the browser, click A or B and then press F2.

Third Implementation
To identify the shortcut key without clicking div after opening the browser, You need to manually call the foucs () method.
Sample Code
Copy codeThe Code is as follows:
/// <Reference path = "Ext/ext-all-debug-w-comments.js"/>

Ext. onReady (function (){

Var viewport = Ext. create ('ext. container. viewport ',{
Layout :{
Type: 'vbox ',
Align: 'stretch'
},
Padding: 10,
Items :[{
Xtype: 'panel ',
Id: 'panela ',
Title: 'test keypa ',
Tbar :[{
Text: 'add (F2 )'
}],
Frame: true,
Flex: 1,
Html: 'Hello, the table or form shown here. ',
AutoEl :{
Tag: 'div ',
Tabindex: 0
}
},{
Xtype: 'panel ',
Id: 'panelb ',
Title: 'test B with a shortcut key ',
Tbar :[{
Text: 'add (F2 )'
}],
Frame: true,
Flex: 1,
Html: 'Hello, the table or form shown here. ',
AutoEl :{
Tag: 'div ',
Tabindex: 0
}
}]
});

Ext. create ('ext. util. keymap ',{
Target: 'panela ',
Key: Ext. EventObject. F2,
Fn: function (key, ev ){
Alert ('add ');

Ev. stopEvent ();

Return false;
}
});

Ext. create ('ext. util. keymap ',{
Target: 'panelb ',
Key: Ext. EventObject. F2,
Fn: function (key, ev ){
Alert ('add B ');

Ev. stopEvent ();

Return false;
}
});

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

Actual results
When you open the browser, press F2 to make the effect. When you open the browser, click A or B and then press F2.