View Full Version : Using Tab to navigate betwen two grids

24 Mar 2014, 5:41 AM
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

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.

3 Apr 2014, 9:23 AM
I made an example to detect if you were in the last cell of a grid awhile ago. Hopefully, this will get you started. There may be better ways to do it, but I think this holds up pretty well.