Recently, I’ve been working pretty furiously on the rewrite of Gloss, my first serious ExtJS application. I wrote Gloss in ExtJS 3, but wanted to give it a much-needed overhaul now that ExtJS 4 is out.

One of the more useful features of Gloss (well, I think it is at least) is the search functionality. In my rework, I’ve been trying to solidify some of the keyboard navigation to allow for a more fluid experience.

Ideally, I want the flow to go something like this:

  1. Enter a search, with as-you-type results
  2. When the full list of results is returned, be able to TAB from search text field to first row in the list of results
  3. Be able to TAB or DOWN ARROW to the next result in the list
  4. When focused on the desired result, be able to strike ENTER or SPACE to load the record

I’ll start with the last two: navigating inside the grid panel itself.

Grid Navigation

With ExtJS 4, this is stupid easy. In my Search controller, I have some listeners set up. They’re keyed in on the “itemkeydown” event of the grid.

Ext.define("Gloss.controller.Search", {
   extend: "Ext.app.Controller",
   init: function() {
      this.control({
         "searchgrid *": {
            itemkeydown: function(grid,rec,item,idx,e,opts) {
               if(e.keyCode==13 || e.keyCode==32) {
                  ... do some stuff More >