Extjs 4 Official Guide Translation: keyboard navigation

Document directory

• Fixed Grid fixing the grid
• Toggling keyboard Mapping

Original: http://docs.sencha.com/ext-js/4-0! /GUIDE/keyboard_nav

Translation: Frank/sp42 reprinted. Please keep the information on this page.

There are only two reasons for using the keyboard: 1. Controlling the mouse pointer is not as fast as typing the keyboard; 2. Some users cannot use the mouse, which is an accessibility issue ).

Navigating with your keyboard is often faster than using the cursor and is useful for both power users and to provide accessibility to users that find a mouse difficult to use.

In order to be able to use the keyboard for full control in the example demonstration, we can modify the original Complex layout example and add the "shortcut key" method to make operations faster and smoother.

We're re going to convert a modified version of the relatively complicated ext jscomplex layout example into an application that is fully accessible through the keyboard. We'll also add keyboard shortcuts to potentially
Make navigation via the keyboard faster than the cursor.

After learning this tutorial, I believe that you will not only understand the basic knowledge required for keyboard navigation, but also learn how to use it.
Keynav,
Keymap and
The focusmanager class is used to implement keyboard navigation.

By the end of this guide you will have an understanding of where keyboard navigation is most needed and how to utilize keyboard navigation withkeynav, keymap
And thefocusmanager.

Getting started with getting started

Here is a necessary example. Open the complex.html and complex. js files in your favorite editor. Remember to copy extjs 4 in the same directory and rename it Ext ".

These are the files we'll be starting from. Unzip them and open complex.html and complex. js in your preferred editor. Also Unzip a copy of ext JS 4 into the same
Directory and rename it 'ext '.

Focus manager the focus Manager

Focus manager provides a very quick way to open the keyboard navigation function. The following is a simple sentence:

The focus manager provides a very quick way to enable basic keyboard navigation. What's more, it's simple to implement:

Ext.FocusManager.enable(true);

In
Ext. onready can be called. If we pass in a Boolean value of true, a "visual prompt" (that is, the focus frame) will be displayed in the focus area of the form ). Through the focus box, you can quickly see where the focus is. You can press the Enter key to enter the application, and then enter and exit different "layers". Press enter to indicate the next layer, and the ESC key indicates that the previous layer is returned. Press the tab key to switch back and forth between adjacent elements (those elements are at the same level ).

Write this line inside
Ext. onready; we pass
BooleantrueTo show a "visual cue" in the form of a blue ring around the focused area (this is known as a focus frame ). this focus frame makes it easy to see at a glance which area has focus. the user presses enter to enter the application
And then move up and down 'levels', with enter to go down a level and backspace or escape to go up a level. the tab key can be used to jump between sibling elements (those that are on the same level ).

Use focusmanager for pure element navigation. If you can, turn off your mouse. Although reasonable, you may find that some areas cannot be accessed (such as grid), or the screen is quite tedious. To solve this problem, we adopt a "shortcut", which allows users to easily jump to some panels of the application.

Experiment with navigating around the elements solely with the focusmanager. if you can, turn off your mouse too. although adequate, you'll probably find that certain areas are either inaccessible (such as the grid) or it's quite cumbersome to get around
The screen. We're going to tackle this with 'shortcuts 'which will allow users to jump to certain panels of the application with counter.

Set shortcuts for the Panel to see if the following conditions are met:

When deciding which panels shold have shortcuts to them it's useful to have some criteria to go:

• Is it frequently used? Is it often used?
• As an anchor? -- That is to say, it can provide a stepping stone to make other remote areas more accessible? Cocould it be used as an anchor-that is, cocould it provide a stepping stone to make other remote areas easier to get?
• Is the operation intuitive? Does it feel intuitive to navigate?

If one of the statements is correct, you can add a shortcut to the command for your end user.

If the answer is yes to at least one of these, give it a keyboard shortcut cut and aid your end-users.

Keynav

As the name suggests, keynav is responsible for providing buttons in the navigation key section. The so-called "navigation key" is listed as follows:

It's the job of keynav to provide easy keyboard navigation. It allows you to use the following keys to navigate through your ext JS application:

• Enter
• Space
• Left
• Right
• Up
• Down
• Tab
• Escape
• Page up
• Page down
• Delete
• Backspace
• Home
• End

However, note that some users do not have certain keys. For example, Apple users do not have the page up, page down, Del, home, or end keys. See the following example to demonstrate its usage.

It's also worth keeping in mind users with limited keyboards that might not have certain keys, for example certain Apple Computers don't have page up, page down, Del, home or end keys. let's take a look at an example of how you 'd use it.

var nav = Ext.create('Ext.util.KeyNav', "my-element", {    "left" : function(e){        this.moveLeft(e.ctrlKey);    },    "right" : function(e){        this.moveRight(e.ctrlKey);    },    "enter" : function(e){        this.save();    },    scope : this});

Keynav can be changed to the direction key, so we convert the commands originally controlled by the tab, press enter, and ESC keys in the example (switch to different panels) to the direction key control.

Keynav's speciality is listening for arrow keys, so we're re going to add the ability to navigate around panels with the arrow keys instead of having to use tab, enter and escape.

var nav = Ext.create('Ext.util.KeyNav', Ext.getBody(), {    "left" : function(){        var el = Ext.FocusManager.focusedCmp;        if (el.previousSibling()) el.previousSibling().focus();    },    "right" : function(){        var el = Ext.FocusManager.focusedCmp;        if (el.nextSibling()) el.nextSibling().focus();    },    "up" : function() {        var el = Ext.FocusManager.focusedCmp;        if (el.up()) el.up().focus();    },    "down" : function() {        var el = Ext.FocusManager.focusedCmp;        if (el.items) el.items.items[0].focus();    },    scope : this});

Currently, we use
Focusedcmp to focus on components. If a function has a value rather than null, it indicates that we focus on that element. The left arrow key is bound to the previous sibling element, and the down key is bound to the first child element. In this way, our applications can be more easily controlled. Next we will go to the Section to see how to add keys for special functions.

We get the currently focused component
Focusedcmp. If the function has a value othernull, We focus on the element that we want, be it the previous sibling with the left arrow key or the first child component with the down key. Already we 've made our application much easier
To navigate. Next, we're going to look
Ext. util. keymap and how to add specific functionality to keys.

Keymap

Generally, ext applications are divided into different regions: north, south, east, and west. We create a keymap object that not only focuses on these elements, but also expands closed areas. Let's take a look at the typical keymap.

You'll notice that there are using regions to our ext application: north, south, east, and west. we're re going to create akeymap that will not only focus on these elements but, if
The region is collapsed, expand it too. Let's have a look at what a typical keymap object looks like.


var map = Ext.create('Ext.util.KeyMap', "my-element", {    key: 13, // or Ext.EventObject.ENTER    ctrl: true,    shift: false,    fn: myHandler,    scope: myObject});

The attribute key of the first configuration item is the value corresponding to the key. Here is a very useful document that tells us which keys correspond to which numbers. The following two configuration items are CTRL and shift, respectively, indicating whether or not to press to form the combination key at the same time. In this example, CTRL is required. Therefore, press Ctrl + press enter to execute the myhandler function. This item can be an inline or function reference. Finally, scope defines where keymap is valid.

The first property,keyIs the numeric keycode that maps a key. A useful document that maps which numbers correlate to which keys can befound here. The next two,ctrl
Andshift, Specify if the respective key is required to be held down to activate the function. In our case CTRL does, so Ctrl + enter will invokemyHandler.fnIs the function to be called. This can either be inline or
Reference to a function. Finally,scopeDefines where thisKeyMapWill be negative.

Keymap

A single key corresponds to a function, and keymap can be processed without any problem. Multiple keys correspond to the same function, and keymap can also be competent. If multiple keys correspond to the myhandler function, for example, [].

KeyMapIs versatile in that it allows you to specify either one key that carries out a function or an array of keys that carry out the same function. If we wanted a number of keys to invokemyHandlerWe 'd write it likekey:
[10, 13].

First, we will focus on the main panel: north, south, east and west.

We'll start by concentrating on the main panels: north, south, east and west.

var map = Ext.create('Ext.util.KeyMap', Ext.getBody(), [    {        key: Ext.EventObject.E, // E for east        shift: true,        ctrl: false, // explicitly set as false to avoid collisions        fn: function() {            var parentPanel = eastPanel;            expand(parentPanel);        }    },    {        key: Ext.EventObject.W, // W for west        shift: true,        ctrl: false,        fn: function() {            var parentPanel = westPanel;            expand(parentPanel);        }    },    {        key: Ext.EventObject.S, // S for south        shift: true,        ctrl: false,        fn: function() {            var parentPanel = southPanel;            expand(parentPanel);        }    }]);

Ext. eventobject. X is the key pointing to our listener, which is clearly written. The rest should be shown in the preceding example. Then we write the expanded function expand ():

We use
Ext. eventobject. X to make it obvious which key we're listening for, the rest shoshould be clear from the example abve. Then we writeexpand()Function underneath:

function expand(parentPanel) {    parentPanel.toggleCollapse();    parentPanel.on('expand', function(){        parentPanel.el.focus();    });    parentPanel.on('collapse', function(){        viewport.el.focus();    });}

The function is used to automatically obtain the focus when the Panel is expanded. Or, when the Panel is closed, the objects at the upper level, namely, viewport, will get the focus.

This function Toggles the collapsing of the panel and focuses on it if it's been expanded, or collapses it if it's already expanded, returning focus to the next level up,viewport.

From the code above, you can see that, whether you close the operation or expand the operation, using the button to execute the Panel is faster than executing the cursor.

Now that all of the code is in place, try expanding and collapsing the panels with a key press versus clicking on the small button that expands or collapses them. it's much faster with the keyboard!

Similarly, we perform navigation, settings, and information operations on the panel on the west. We already know parentpanels, so to avoid naming conflicts, I call them "subpanel subpanels ".

Next, we'll go through a similar process with the navigation, settings and information tabs on the west panel. I 've called them subpanels because They're children to the otherparentPanelsThat we 've seen already.

{    key: Ext.EventObject.S, // S for settings    ctrl: true,    fn: function() {        var parentPanel = westPanel;        var subPanel = settings;        expand(parentPanel, subPanel);    }},{    key: Ext.EventObject.I, // I for information    ctrl: true,    fn: function() {        var parentPanel = westPanel;        var subPanel = information;        expand(parentPanel, subPanel);    }},{    key: Ext.EventObject.N, // N for navigation    ctrl: true,    fn: function(){        var parentPanel = westPanel;        var subPanel = navigation;        expand(parentPanel, subPanel);    }}

It is similar to the previous pattern, except that we add a subpanel variable. The previous expand function does not adapt to the new subpanels, so we can modify it based on the original one as follows:

We follow the same pattern as we 've used before but added a variable called
subPanel. OurexpandFunction won't know what to do with these so we'll refactor it to act accordingly depending on whethersubPanelIs declared or not.

function expand(parentPanel, subPanel) {    if (subPanel) {        function subPanelExpand(subPanel) {            // set listener for expand function            subPanel.on('expand', function() {                setTimeout(function() { subPanel.focus(); }, 200);            });            // expand the subPanel            subPanel.expand();        }        if (parentPanel.collapsed) {            // enclosing panel is collapsed, open it            parentPanel.expand();            subPanelExpand(subPanel);        }        else if (!subPanel.collapsed) {            // subPanel is open and just needs focusing            subPanel.focus();        }        else {            // parentPanel isn't collapsed but subPanel is            subPanelExpand(subPanel);        }    }    else {        // no subPanel detected        parentPanel.toggleCollapse();        parentPanel.on('expand', function(){            parentPanel.el.focus();        });        parentPanel.on('collapse', function(){            viewport.el.focus();        });    }}

The event listener expand executes the focus action, that is, the focus is executed only after the Panel is expanded. It needs to be packaged in setTimeout; otherwise, the focus is too early when the Panel is small, in this case, it will be inaccurate (that is, it will be focused during the expansion process ). The latency is 200 milliseconds, but parentpanels does not.

DespitefocusBeing inexpandEvent listener, which is meant to fireAfterThe Panel has been expanded, it needs wrapping insetTimeoutBecause otherwise it focuses too early resulting in a focus Frame
Smaller than the Panel (that is, it focuses while it's expanding). Compensating 200 milliseconds gets around this; this problem isn't present withparentPanelS.

At this point, you can open and close the Panel, as well as a simple keyboard (such as Shift + E or Ctrl + S ). Of course, any button event can trigger any ext JS function, making the application feel more natural.

At this point you can open and close panels, as well as focus them, purely with the keyboard (e.g. shift + E or Ctrl + S ). naturally, any function of ext JS can be triggered by a key press leading to define possibilities for a more native-feeling application.

Finally, we add the keymap object. There are two tabs, one in the center panel and the other in the eye data panel. It would be useful if we could close the tab panel in a browser, that is, CTRL + W.

There's one last object to add to ourKeyMap, There are two tabs, one on the center panel and the other next to the 'eye data' tab. it wowould be useful to be able to close these as you wowould a tab in a browser with Ctrl + W.

{    key: Ext.EventObject.W, // W to close    ctrl: true,    fn: function(){        var el = Ext.FocusManager.focusedCmp;        if (el.xtype === 'tab' && el.closable) {            el.up().focus();            el.destroy();        }    },    scope: this}

The above configuration process is described as follows:
The focusedcmp attribute gets the current focus component. If this is a tab component and can be disabled, its parent Panel gets the focus and destroys it.

We 've configured which key presses we're re listening for and get which component is currently focused with the focus manager 'sfocusedcmp
Property. If the currently focused component is a tab and it's closable, then we set the focus to the parent panel and destroy the tab.

Fixed Grid fixing the grid

You may have noticed that, without the help of a mouse, we cannot focus the row object in the grid. Through the console clues, we can't figure out why this is not the case-the console report says "POS is undefined ". The click event will pass in information about the record, including its location in the grid. However, the focusmanager is not sent to the information we need, so we need to simulate an object with row and column attributes to specify the location. Observe the following viewport object:

You may have noticed that when we try to focus a row in the grid it isn' t possible without the mouse. if you look in the console we get a clue as to why this is, it reports that "POS is undefined ". the click event passes information on the record, including
What its position in the grid is. However, using the focusmanager, it doesn' t pass this information so we need to emulate it by passing an object that specifiesrowAndcolumn. Do the following underneathviewport
Variable:

var easttab = Ext.getCmp('easttab');var gridMap = Ext.create('Ext.util.KeyMap', 'eastPanel', [    {        key: '\r', // Return key        fn: function() {            easttab.getSelectionModel().setCurrentPosition({row: 0, column: 1});        },        scope: 'eastPanel'    },    {        key: Ext.EventObject.ESC,        fn: function() {            easttab.el.focus();        },        scope: 'eastPanel'    }]);

Try it. If it succeeds, you can use the keyboard to enter or exit the grid. In addition, note that scope is set to "eastpanel". Otherwise, you cannot leave the grid.

Try this and you'll see that we can successfully enter and exit the grid using the keyboard. It's important that we specifyscopeOn these keys otherwise you won't be able to escape from the grid.

Toggling keyboard Mapping

One of the useful functions of keymap is to easily set enabled or disabled. For example, when most users of your application click an element but do not want a focus box to appear, you can make a button (or other keyboard ing) to activate this behavior.

A useful featureKeyMapIs that it can easily be enabled or disabled. it cocould be that you don't want most users of your application to have a focus frame when they click on an element, so you cocould make a button (or anotherKeyMap)
That enables this behavior.

If you want to add a global button to enable or disable the keyboard navigation, you can use the following:

If you wanted to add a global key press that wocould turn on and off keyboard navigation you cocould do so with the following:

var initMap = Ext.create('Ext.util.KeyMap', Ext.getBody(), {    key: Ext.EventObject.T, // T for toggle    shift: true,    fn: function(){        map.enabled ? map.disable() : map.enable();        Ext.FocusManager.enabled ? Ext.FocusManager.disable() : Ext.FocusManager.enable(true);    }});

We have created a new keyboard ing to disable the SHIFT + T keyboard navigation, and vice versa. The existing keymap cannot be used because it is automatically disabled and cannot be reinitialized.

We 've created a newKeyMapThat will turn off keyboard navigation with Shift + T and turn it back on with the same. We aren't able to use the existingKeyMapBecause it wocould be turning itself off and wouldn't be able to be reinitialized.

Conclusion conclusion

We can convert the original example that cannot be controlled by the keyboard to the correct one. We also encounter custom functions that must be added through the focus manager.

We 've converted a complex series of panels that wocould have otherwise been inaccessible to use the keyboard. we 've also encountered some examples where we 've had to add some custom functionality on top of the Focus manager.

We also learned how to use keymap in different panels to implement jump switching. Finally, how easy it is to use keynav to move a program with a direction key.

WithKeyMap, We 've learned that we can jump to different panels as well as invoke any functionality that we 'd usually write with a keystroke. Finally,KeyNavWe 've seen how easy it is to move around und an application with Arrow
Keys.