Unable to disable the checkboxes in the check columns

[summer980824]

Hi,

I am trying to disable the check boxes when using Ext.ux.CheckColumn. When I set disabled is true in the configuration, it doesn't seem to work, as I can still change the check boxes in the column.

{
                xtype: 'checkcolumn',
                header: 'Create',
                dataIndex: 'create',
                menuDisabled: true,
                disabled: true
            }

[scottmartin]

You could just create override to disable the action:

Ext.override(Ext.ux.CheckColumn, {
    processEvent: Ext.emptyFn // do nothing
});

This is a simplified version, you could copy the entire function and replace with your code.

Scott.

[scottmartin]

err, The previous leaves a dirty marker .. here is a better approach:

header: 'Check',
xtype: 'checkcolumn',
dataIndex: 'check',
editor: {
disabled: true,
	xtype: 'checkbox'
},
listeners: {
	beforecheckchange: function(){
		return false; // disable check
	}
}

Scott.

[summer980824]

Brilliant solution! Thanks for your help

But I think adding the listener is enough to disable the checkbox, it's no need to configure the editor.

[anitacynax]

What is the difference between checkchange and beforecheckchange? I am currently using checkchange but do not understand the difference between the two. Thanks.

[anitacynax]

err, The previous leaves a dirty marker .. here is a better approach:

header: 'Check',
xtype: 'checkcolumn',
dataIndex: 'check',
editor: {
disabled: true,
    xtype: 'checkbox'
},
listeners: {
    beforecheckchange: function(){
        return false; // disable check
    }
}

Scott.

In this case 'return false' in the beforecheckchange function disables ALL the checkboxes in the checkcolumn. What do you do however if you want to enable only ONE checkbox in the checkcolumn (i.e. disable all but one checkbox in the checkcolumn)?

[scottmartin]

Is there a condition that you can set based on the params?

beforecheckchange: function(column, row, checked, opts){ 
    if (..) { return false; } 
}

Scott

[anitacynax]

Thanks for the reply, Scott. I solved this issue in another way. Thanks though.

[scottmartin]

It would be helpful for others if you would post your solution

Scott.

[anitacynax]

I used checkchange and the following line of code in checkchange:

for (var i =0; i < teststore.getCount(); i++) {teststore.getAt(i).set(this.dataIndex, false); record.set(this.dataIndex, true);}

Here is the code for the grid and the checkcolumns:

var grid = Ext.create('Ext.grid.Panel', {
  id: 'animalGrid',
  title: '',
  store: teststore, 
  plugins: ['headertooltip'],
  columns: [
   { text: 'Name',  dataIndex: 'Name', width: 120},
   { text: 'Role',  dataIndex: 'Type', width: 125},
   { text: 'Mammal', dataIndex: 'Mammal', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Amphibian', false); record.set('Bird', false); for (var i =0; i < teststore.getCount(); i++) {teststore.getAt(i).set(this.dataIndex, false); record.set(this.dataIndex, true);}  }},width: 68, tooltip: '<b>Mammal Description:</b> '},
   { text: 'Amphibian', dataIndex: 'Amphibian', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Mammal', false); record.set('Bird', false); }},width: 68, tooltip: '<b>Amphibian Description:</b> '},
   { text: 'Bird', dataIndex: 'Bird', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Mammal', false); record.set('Amphibian', false); }},width: 68, tooltip: '<b>Bird Description:</b>'}
  ]