Question about ExtJS4.1: Support for Shortcut Keys _ javascript skills

This article introduces the support for ExtJS4.1 shortcut keys. If you need a friend, refer to the following question. One page has two panels and each has a [add (F2)] button. How do you support shortcut keys? Image Diagram

First implementation
It should be very simple. ExtJs provides "Ext. util. KeyMap", which is easy to support shortcut keys.
Sample Code

The Code is as follows:

///

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 attribute tabindex = 0 must be added to the p element.
Sample Code

The Code is as follows:

///

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: 'P ',
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: 'P ',
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 p after opening the browser, You need to manually call the foucs () method.
Sample Code

The Code is as follows:

///

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: 'P ',
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: 'P ',
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.