View Full Version : Ext - Only allow focus in inputs inside grid panel

4 Aug 2016, 7:53 AM
I have a trouble with such a very specific thing of Ext 3.4
I have a grid with a store which its result is then loaded in the grid. The render contains some text fields and some input (all of them are type=text).
I need to implement that when the user press tab in the text A, the focus must be set in B. If I press tab again, if C is enabled then C must be focused, if C is disabled, the focus must be set in the A located in the next row. Then, if C has focus and I press tab, I must jump to D.
I could jump from A to B by adding tabindex but then, when pressing tab again, the focus is changed to the first column (which has a label) and after pressing tab again, the focus passes to that column content (a, image, whatever).
The same behaviour I had if I focus elements with jQuery.
I do not know if it helps but this is the code:

var selModel = new Ext.grid.RowSelectionModel({ singleSelect: true, listeners: { beforerowselect: function (sm, row_index, keepExisting, record) { sm.suspendEvents(); if (sm.isSelected(row_index)) { // row already selected, deselect it (note: other selections remain intact on deselect). sm.deselectRow(row_index); } else { sm.selectRow(row_index, true) } sm.resumeEvents(); return false; } } }); selModel.isValidRow = true; // To prevent trash html when the user navigates between sections if (this.grid) { this.grid.destroy(); } this.grid = new Ext.grid.EditorGridPanel({ id: 'auctions_grid_' + muniaxis.auctions.Form.activeAuctionsButton, store: store, syncFocus: true, colModel: muniaxis.colHelper.getColumnModel(columns), tbar: tbar, bbar: bbar, frame: true, sm: selModel, autoScroll: true, autoWidth: true, cls: 'grid', stripeRows: true, loadMask: { msg: viewData.resources.waitingMessage }, viewConfig: { emptyText: viewData.resources.gridEmptyMessage, forceFit: true, autoFill: true, scrollOffset: 1, getRowClass: muniaxis.renders.getRowClass } });

Gary Schlosberg
4 Aug 2016, 9:15 AM
Perhaps you could listen to the specialkey (http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Editor-event-specialkey) event to catch the tab presses and apply your logic there.