View Full Version : How to make a column of grid cells non-selectable or "disabled"?

James Quall
15 Apr 2013, 5:31 AM
I have an Ext.grid.Panel where cells in the first column are non-editable, and all subsequent columns are editable (i.e. they have editors defined). I'd like to make it so that all cells in the first column are a) not selectable (i.e. clicking on them does not highlight them/does nothing) and b) are skipped over when you tab through the grid with your keyboard.

In a sense, I'd like it to be as if cells in the first column are completely de-activated/disabled, so users cannot interact with them in any manner. How can this be done?

I wish I had code to post but I'm stuck on how to even begin both parts. Here's a JS fiddle of my grid, at least:

http://jsfiddle.net/qnXrp/ (http://jsfiddle.net/qnXrp/)

16 Apr 2013, 10:33 PM
I'm afraid there's no simple-config way to do that, but it is doable. You'll need to set listeners for beforecellclick, beforecellkeydown, and beforeselect to manage whether the cell is selected or not.

I did a little legwork here, but I'll leave the remainder to you:

listeners: {
beforeselect: function (selModel, record, row, col) {
if (col === 0) { return false; }
beforecellclick: function (view, td, col, record, tr, row) {
if (!Ext.isEmpty(col) && col === 0) {
view.getSelectionModel().setCurrentPosition({row: row, column: 1});
return false;