ExtJS Using Tab to navigate between two grids

Question

I have a panel that contains two grids, both of which are editable using the cell editing plugin. Within the grids, users can use the tab key to move between editable fields. However, I can not seem to find the right way to get the tab key to allow the user to move from the last editable cell in the first grid to the first editable cell in the second (there are no components between the two grids). The user is just stuck in the last editable field of the first grid.

I tried using FocusManager, but this made keyboard navigation far more complex, rather than less, requiring use of the arrow keys to get into and out of each form element and grid.

I added this code to the parent panel:

var nav = new Ext.util.KeyNav(Ext.getDoc(), {
tab: function(e) {
console.debug('TAB HIT!', arguments);
},
scope: this
});
nav.enable();

just to see what tabs were detected, but it only activated when the tab key was clicked and a form element in the parent panel itself had focus.

I guess there are a few elements I need to learn, how to I pass focus from element to element, and how do I detect the first and last element in a grid? Or is there some way to do this built into ExtJS? Any suggestions or advice would be greatly appreciated.

try this solution lukehorvat.com/blog/excel-grid-plugin-for-ext-js-4 — Oğuz Çelikdemir
I looked at that plugin, but it still doesn't offer the functionality I need. If I put two panels into the page (just duplicating the panel that is in the sample in JSFiddle for example) when I get to the last cell of the first panel, I can't from the keyboard tab to the first cell of the second panel. — Wige

egerardus egerardus · Accepted Answer · 2014-03-25T18:26:03

I would use the new cellkeydown event for grid panels.

Implement a handler for that event which checks the key type, and whether the cell is the last column in the grid, then starts a cell edit in the first column of the corresponding row in the other grid.

You can find out if it was a TAB key from the 7th argument passed by this event.

You can find out if it is the last cell in the grid from the 3rd argument passed by the event.

The rowIndex is the 6th argument - use that so you know which row to start editing in the other grid.

Event handlers can be added to components using the on method by the way.

You can also look up the functions that need to be called to start cell editing in the API here.

If you had more code and maybe a bounty I might be able to get more specific but that's the gist of how I would do it.

ExtJS Using Tab to navigate between two grids

1 Answers