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

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.