As Enterprise applications begin moving to the web instead of the desktop many developers may forget about providing key bindings for their applications. Most web applications use the keyboard only for text entry and do not associate particular key combinations with user actions. By providing this type of key handling, particularly for applications which require a lot of data entry, we can improve the end-user experience.
While at a recent client engagement, we wanted to provide a smooth transition for users skilled at working with a legacy ‘green screen’ application to using a new Ext JS version. Part of this transition involved enabling power users to continue navigate the application with the same key handling. By the end-users not having to remove their hands from the keyboard, their efficiency increases substantially. Here’s some insight into how we accomplished the task at hand.
Ext.KeyMap
Ext provides several components that support keyboard navigation out of the box such as GridPanel, ComboBox, and TreePanel. To implement custom keyboard handling, developers can use the Ext.KeyMap and Ext.KeyNav classes to attach keyboard bindings to any component or element they wish.
The first set of keys we wanted to handle was all of the Function keys (F1-12). While most browsers reserve some/all of these keys, with some ext-pertise, we are able to override the default function if need be for our application. The application we were working with was completely dynamic and server driven, so we really couldn’t define all of the handlers ahead of time. This led to us dynamically building an array of key handler configuration objects and passing them all through to our new Ext.KeyMap object.
var keys = [];
for(var i = 0;i < buttons.length;i++) {
var btn = buttons[i];
// fkey property contains a string referencing the Ext constants (ie: Ext.EventObject.F1)
var fk = eval(button.fkey);
btn.handler = this.handleKey.createDelegate(this, [fk]);
keys.push({
key: fk,
handler: this.handleKey.createDelegate(this, [fk]),
stopEvent: true,
scope: this
});
}This implementation demonstrates creating a toolbar and assigning function keys that would perform the same action when the button was clicked or when using the mouse. buttons is an array of button configurations that we pulled from the Json response from the server. The server is sending over a string which references some constants built into the Ext.EventObject for function keys. Since the data comes over as a string we can simply eval it and get the resulting number.
We use a generic handler for all of the click and keypress functions since it is all controlled from the server. createDelegate lets us pass along the key that was pressed so that we can share the same handler function regardless of if the event was a click or a keypress. With the keys array built and our handlers added into the buttons array, we are able to toss these into our Panel configuration and it will do the heavy lifting for us.
tabPanel.add({
title: 'Test Panel',
tbar: buttons,
keys: keys
...
});With our layout in place, adding a tab with our key handlers is pretty simple. The tbar parameter takes our array of Ext.Button configs that were server generated (aside from the handler), and the keys parameter takes an array to pass along to the Ext.KeyMap object.
Ext.KeyNav
The next set of key handling added was some additions to the grid keyboard navigation. The GridPanel has built in key navigation from the RowSelectionModel that it creates. Check out this grid example and select a row, you can then use the arrow keys to move up/down and even hold shift and press down to select a range of rows. We added a simple way to navigate through a large paged data set by extending GridPanel. The PagingToolbar provides keyboard handling once you’ve focused within the built-in TextField, but we wanted to allow the users to just hit ‘page down’ or ‘end’ when focus was anywhere within the GridPanel and ensure it functions as expected.
MyGrid = Ext.extend(Ext.grid.GridPanel,{
...
afterRender : function() {
MyGrid.superclass.afterRender.call(this);
this.nav = new Ext.KeyNav(this.getEl(),{
pageDown: this.pagingNav.createDelegate(this,['next']),
pageUp: this.pagingNav.createDelegate(this, ['prev']),
home: this.pagingNav.createDelegate(this,['first']),
end: this.pagingNav.createDelegate(this,['last']),
scope: this
});
},
pagingNav: function(page) {
var pt = this.getBottomToolbar();
if (!pt[page].disabled) {
pt.onClick(page);
}
},
...
});This is a snippet from an extended GridPanel class, and it assumes that there is an Ext.PagingToolbar in place and it is the bottom toolbar (bbar). We could certainly write this code without the PagingToolbar, but it has already done the work to calculate page sizes and has handlers in place for determining the proper load call when skipping backwards/forwards in pages. We create our new Ext.KeyNav object and apply it to the GridPanel’s underlying Ext.Element. KeyNav does the work of assigning handlers to the proper key codes and calls our pagingNav function with the parameter that we bound to it using createDelegate. The pagingNav function merely checks to see if that particular button is disabled, for instance if you’re on the last page, you cannot press the next button again, so we don’t let them “page down” again either. As long as that button is not disabled we act as if the user clicked on the page next button and let the PagingToolbar do it’s magic and load the proper page.
Utilizing these techniques we were able to provide a seamless keyboard navigation experience for our client and their customers migrating from the legacy application to the web application
Getting Started
As you can see, adding custom key handling within an Ext JS application is quite easy. For any custom keys, including function keys, alpha keys with or without modifiers (alt/shift/ctrl) there is Ext.KeyMap. For navigation, arrows, paging, home/end there is Ext.KeyNav. There’s some more handy example code available for each right within the API documentation if you need any further help getting started.
