View Full Version : Disabling Grid Row

30 Mar 2011, 7:32 AM
I was wondering if there was a way to "disable" a grid row. This would effectively gray out the row and disable the on rowselect event.


30 Mar 2011, 7:38 AM
Add a 'beforerowselect (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.RowSelectionModel&member=beforerowselect)' listener to your selection model (I'm assuming it's RowSelectionModel) and return false for the row you don't want selectable. To colour your row supply your own getRowClass (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridView&member=getRowClass) for the grid view and have specific CSS for that row.

30 Mar 2011, 7:49 AM
Is there a way to do this prior to the row being selected, i.e. when the grid is loading the store's records? That way the user sees the row as a gray color and knows not to select it.

30 Mar 2011, 7:56 AM
That's what getRowClass can be used for.

30 Mar 2011, 8:14 AM
So if I wanted to run this process after the grid is loaded and rendered what event would I trigger off of? Would that be the render?

30 Mar 2011, 8:23 AM
Have you looked at the docs for getRowClass (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridView&member=getRowClass)? Just specify CSS and then hook into the getRowClass handler:


<style type=text/css>
.disabled-row {
background-color: red; /* Whatever you want it to look like! */


var grid = new Ext.grid.GridPanel({
// ...
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store)
if (rowIndex == 0) // Or whatever it is you are using to determine read-only row or not
return 'disabled-row';
return '';

31 Mar 2011, 7:48 AM

Just wanted to say thanks, and that your suggestion worked well. I was a little confused and it became evident as to why; I am using the ext documentation for 3.0 currently, which doesn't describe the getRowClass method. Thanks again ;)