View Full Version : How to prevent tab selection of editable: false cells within an EditorGridPanel

6 Aug 2010, 12:32 PM
I find myself puzzling over how to solve the following, taking some stabs at a few things after reading through some posts but I have not found something that works in my situation....

I have an EditorGridPanel which loads a ColumnModel with several columns. Only two of the Columns have editors. All of the other columns have editable: false properties.
Everything works very nicely except in terms of user accessibility. I need to support Tab entry into the form fields but currently pressing tab only cycles through the cellSelection, the user has to hit enter or click to enable the editor once they are in the correct column.

Is my base approach flawed in that if I want a user to tab through data input fields I should not use a EditorGridPanel if most of those columns are not for editing? Or is there a simple method to force tab to focus on editable fields and not cells?


7 Aug 2010, 3:58 AM
Try using a RowSelectionModel instead of the default CellSelectionModel.

7 Aug 2010, 11:47 AM
I messed with this for hours, there's a lot of information on this subject to consume.

Condor, is there a best way to go about doing this / a link to the pertinent thread I can't seem to find?

grid.startEditor(x, y);

is the best way to start the editor on a cell? I keep trying to change the selection from cells that aren't edittable to the next one but the startEditor call refires the selectionmodel and (most probably) I'm not able to get it just right with or without [suspend|resume]Events.

Here's my Ext.onReady:

var myGrid = new Ext.grid.EditorGridPanel({
title: 'My Grid',
region: 'center',
store: new Ext.data.ArrayStore({
fields: ['name', 'age', 'tail']
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
columns: [
{header: 'Name', dataIndex: 'name', editor: new Ext.form.TextField({

{header: 'Age', dataIndex: 'age'},
{header: 'Tail', dataIndex: 'tail', editor: new Ext.form.NumberField({

clicksToEdit: 0,
listeners: {
'render': function() {
['John Smith', 10, 0],
['John Smith2', 20, 1],
['John Smith3', 30, 0],
['John Smith4', 40, 1],

['Roger Rabbit', 10, 1],
['Roger Rabbit2', 20, 0],
['Roger Rabbit3', 30, 1],
['Roger Rabbit4', 40, 0]


function() {
var lastRow = -1;
var lastCol = -1;
return function(sm) {
if(!sm.hasSelection()) {
var grid = sm.grid;
var selCell = sm.getSelectedCell();
var row = selCell[0];
var col = selCell[1];

if(grid.editing || (lastRow == row && lastCol == col)) {
} else {
lastRow = row;
lastCol = col;

if (sm.grid.colModel.isCellEditable(col, row)) {
console.log("Starting Editor ", row, col);
grid.startEditing(row, col);
} else {
var mLen = sm.grid.colModel.columns.length;
if (col >= mLen) {
col = 0;
row += 1;
} else {
col += 1;

console.log("Selecting next");
grid.getSelectionModel().select(row, col);

new Ext.Viewport({
layout: 'border',
items: [myGrid]


That half-works. Thoughts? Am I solving the wrong problem?

7 Aug 2010, 10:14 PM
This is a mostly working solution to the problem darthwes, its a clever way to walk the grid on selectionchange.
I think this provides a better tab-indexing user exp. of EditorGridPanels that have editable: false cells.
Thanks for the inspiration.

7 Aug 2010, 11:34 PM
RowSelectionModel should already tab to the next editable cell. If it doesn't then there is something wrong with your configuration (or it's a bug in the selection model).

9 Aug 2010, 2:38 PM
@Condor: I believe we're mis communicating. I believe codecat wants to open the editor on the next editable field when the grid is not in edit mode. Obviously it does a fine job while in edit mode, but this user wants selection to = open the editor and he has a side case where the column is not an editable one.

@Codecat: I think Condor's trying to tell us that we're breaking the default behaviour of the grid so much that it's not worth the effort and/or we're having a mis communication. Also, I'd like to see where you're at on this; have you made any progress?


22 Aug 2010, 7:26 AM
Darthwes, I was offline for almost two weeks, now that I am back I wanted to follow up with you on this.
I believe your work on this does in fact help a fundamental problem with the usability of an editor grid.

Use this case as an example:
Imagine an editor grid with many columns, say over12, but only two of those columns are set as editable.
Imagine that this particular interface needs to be designed for Speed of Use.
Imagine the user wants to edit all the editable fields as quickly as possible and may not have or want to use a Mouse.

The default behavior problem:
Again, the default behavior in an editable grid is that by pressing tab you select the next column regardless of weather or not it is editable. To me this breaks standard form usability - a user without a mouse should be able to keyboard navigate with the tab key to all the form element fields.

This is why your approach darthwes appears to me to be on the right track to solve for this.
Condor, if you believe the approach darthwes outlined is not the optimal one could you please describe a solution that solves for the above case?

Thanks guys!