PDA

View Full Version : Keyhandling problems on GridPanel - Accessibility Help required



AndyPC
14 Nov 2011, 6:41 AM
Basically my problem is with accessibility (keyboard) on a GridPanel. I finally realised that for the default keynav of up and down keys to work, an item in the GridPanel must be selected. My problem now is that the TAB key is invisibly tabbing around each cell if I enter the focus of the GridPanel, but doesn't after a keynav navigation (up or down). Ideally I want TAB to re-enter the pages tabindex'd order of controls. Can anyone help or advise?

AndyPC
15 Nov 2011, 2:26 AM
Okay, it's actually me again, in the hope someone will look at this.

My GridPanel is lamost working fine, although I only want TAB to enter or leave the control, but it looks like the render HTML gives the table cells a tabindex of 0. I've got a keydown listener on the GridPanel, which is capturing the TAB key, I just can't figure out how to make it tab/focus to the next item with a tabindex > 0.

AndyPC
15 Nov 2011, 8:09 AM
Well, no one replied before I managed to get a solution. Please look at the code below:



viewready: function(thisGrid) { Ext.each(Ext.query("td[tabindex=0]"), function(item, index, allItems) {
if (index > 0) {
Ext.get(item).dom.removeAttribute('tabindex');
}
});
thisGrid.getSelectionModel().selectFirstRow();
}




So basically, viewready seems to be the best event to attach to as I couldn't find another that fired when rendering of contents and Grid had finished. Basically, I'm finding all table cells (TD) with a tabindex, and removing the attribute, except for the very first TD as it's required for the Grid to gain focus.