PDA

View Full Version : How do I make GridPanel a tabstop?



sideview1
10 Dec 2015, 10:41 AM
Hello all, long time since I've posted. We're trying to make our application more keyboard friendly. One thing I can't seem to figure out is how to make our grid panels be a tab stop in the application. If you click on the grid, the up/down, enter works great to select records, but I can't get the browser to recognize that it should stop on the gridpanel.

I have tried overloading various events and on rowselect I set that previous row tabIndex=-1 and the current row tabIndex=0, but as I move along Ext appears to just set them all back to -1 at somepoint. I'm trying to see how to set the first row in the grid to tabIndex=0 when it first loads, and then as they arrow around make sure that if they tab out, tab around the app and comeback that the previous spot is the currently highlighted record.

Unfortunately, I can't get the record to stop on the grid by default.


The version of ext I'm using is 4.2.1, unfortunately, I think that's the latest public version.
Thanks

jdkhamba
11 Dec 2015, 5:19 AM
I don't know if you have tried this already but Ext has a keynav utility:

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.util.KeyNav

An example:

http://docs.sencha.com/extjs/4.2.0/#!/example/keynav/keynav.html

sideview1
11 Dec 2015, 5:25 AM
I don't know if you have tried this already but Ext has a keynav utility:

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.util.KeyNav

An example:

http://docs.sencha.com/extjs/4.2.0/#!/example/keynav/keynav.html

Thanks, I've looked at KeyNav, but not sure that will help me. Once the focus is on the grid it works fine. My problem is I can't tab from somewhere else on the screen to the grid so it has the focus.

For example:
I have menus at the top of the screen, a button toolbar above the grid and a paging toolbar at the bottom. If I tab on the page, it will select the menus, then the button toolbar, then jump over the grid and down to the paging toolbar.
I need it to stop on the grid so then up/down arrows would work within the records in the grid

jdkhamba
12 Dec 2015, 7:06 AM
It is a little tricky but doable:

https://fiddle.sencha.com/#fiddle/124q

The trick is to let the view of the grid panel receive focus. (getView()) and also limit the number of components that is allowed to receive focus as a result of tab key press

icexdev
9 Jan 2016, 12:11 AM
try add this



listeners: {
viewready: function (panel) {
var view = panel.getView();
var tableEl = view.getEl().dom.firstElementChild;
tableEl.setAttribute('tabIndex', 0);
}
}