View Full Version : How to disable a gridpanel?

2 Jun 2011, 2:45 AM
hi, I'm new to extjs. I want to disable a gridpanel and all the handlers to the "click" or "dblclick" event do not execute. What should I do? thanks!

I've tried to add this code : grid.disabled = true;
but it doesn't work.

2 Jun 2011, 8:51 AM

2 Jun 2011, 4:49 PM
thanks for your answer.
It works and I also want to know what I should do if I don't want to disable the scroll.
In other words, I want the gridpanel to be readonly and doesn't respond to any event. thanks

2 Jun 2011, 10:23 PM
Rather than calling setDisabled() there's a disableSelection config option that will prevent clicking from selecting cells/rows. If you also want to get rid of the highlighting as the mouse moves over the grid you can add:

viewConfig: {
rowOverCls: '' // Note this is 2 single quotes, not a double quote

You may also want to consider the enableHdMenu config option if you don't want the header menus.

7 Jun 2011, 2:03 AM
thanks for your answer. I'm new to Extjs. Would you please tell me how disable selecting rows and the events dynamically.
I tried this: grid.disableSelection = true;
but disableSelection is undefined.
what should I do? is there a method to disable the row selecting and row events?

7 Jun 2011, 2:43 AM
I don't know of anything out-of-the-box to do it but if you take a look at the ExtJS source code you'll find that all disableSelection does is create a RowSelectionModel with the selectRow() method blanked out. Using that as inspiration we could write our own selectionmodel:

var grid = new Ext.grid.GridPanel({
height: 300,
renderTo: Ext.getBody(),
width: 300,
columns: [{
dataIndex: 'name', header: 'Name'
selModel: new Ext.grid.RowSelectionModel({
setDisabled: function(disabled) {
if (disabled) {

// Switch the implementation on this instance
this.selectRow = Ext.emptyFn;
else {
// Fall back to the definition on RowSelectionModel
delete this.selectRow;
store: new Ext.data.ArrayStore({
data: Ext.zip(['tom', 'peter', 'rob', 'paul', 'andy', 'mike', 'steve']),
fields: ['name']
tbar: [
enableToggle: true,
text: 'Disabled',
toggleHandler: function(button, pressed) {

For anything other than a noddy example like this I'd probably factor out this new selectionmodel to a class of its own, using Ext.extend().