EXTJS checkcolumns disable on click - extjs

Question

I have two EXT JS check columns like this:
var maleColumn = new Ext.grid.CheckColumn({
dataIndex: 'male',
headerId: 'male'
})
maleColumn .on('click', function(s, e, t, record) {...})
var femaleColumn = new Ext.grid.CheckColumn({
dataIndex: 'female',
headerId: 'female'
})
femaleColumn .on('click', function(s, e, t, record) {...})
Now I need to write an onClick event so that when one of these is clicked, the other one is disabled. How can I do it?

Answer 1

First, I should say that's a bit strange to have two CheckColumn for gender. Why not having one Column that has a combobox for user to select the gender?
But if you have to do so, I have a solution. My solution is based on Extjs 3.2.1.
//First, extend Ext.ux.grid.CheckColumn
MyCheckColumn = Ext.extend(Ext.ux.grid.CheckColumn,{
//The reference to the related dataIndex
relatedIndex : null,
//Override onMouseDown method
onMouseDown : function(e, t){
if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
/*
* By checking the related record data, we can know if the other CheckColumn
* is checked or not (true/false means checked/unchecked).
* If false, we can then check the checkbox that is clicked.
*/
if(!record.data[this.relatedIndex])
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
}
});
//Using MyCheckColumn and include relatedIndex in the config options.
var maleColumn = new MyCheckColumn({
dataIndex: 'male',
relatedIndex: 'female',
headerId: 'male'
});
var femaleColumn = new MyCheckColumn({
dataIndex: 'female',
relatedIndex: 'male',
headerId: 'female'
});
Though the solution works but I don't recommend it since the implementation may change when extjs upgrades. e.g. For extjs 3.3.1, you have to override another method but not onMouseDown:
processEvent : function(name, e, grid, rowIndex, colIndex){
if (name == 'mousedown') {
var record = grid.store.getAt(rowIndex);
//Do the changes here like the way I do above...
record.set(this.dataIndex, !record.data[this.dataIndex]);
return false; // Cancel row selection.
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
}