Ajax Girl

I am a strong believe in making the keyboard a first class citizen for your applications, including on the Web. Thus, I was interested to read how Ext JS has keyboard handling that ties into the entire system:

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.

PLAIN TEXT

JAVASCRIPT:

1.  
2. var keys = [];
3. for(var i = 0;i <buttons.length;i++) {
4.     var btn = buttons[i];
5.     // fkey property contains a string referencing the Ext constants (ie: Ext.EventObject.F1)
6.     var fk = eval(button.fkey);
7.     btn.handler = this.handleKey.createDelegate(this, [fk]);
8.  
9.     keys.push({
10.         key: fk,
11.         handler: this.handleKey.createDelegate(this, [fk]),
12.         stopEvent: true,
13.         scope: this
14.     });
15. }
16.  

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 GrindPanel. 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.

PLAIN TEXT

JAVASCRIPT:

1.  
2. MyGrid = Ext.extend(Ext.grid.GridPanel,{
3. …
4. afterRender : function() {
5.    MyGrid.superclass.afterRender.call(this);
6.  
7.     this.nav = new Ext.KeyNav(this.getEl(),{
8.         pageDown: this.pagingNav.createDelegate(this,[‘next’]),
9.         pageUp: this.pagingNav.createDelegate(this, [‘prev’]),
10.         home: this.pagingNav.createDelegate(this,[‘first’]),
11.         end: this.pagingNav.createDelegate(this,[‘last’]),
12.         scope: this
13.     });
14. },
15.  
16. pagingNav: function(page) {
17.     var pt = this.getBottomToolbar();
18.     if (!pt[page].disabled) {
19.         pt.onClick(page);
20.     }
21. },
22. …
23. });
24.