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);
        }
    }