Question

我有两个EXT JS检查列，如下所示：

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) {...})

现在我需要编写一个onClick事件，以便在单击其中一个时，另一个被禁用。我该怎么办？

Answer 1

首先，我应该说有两个CheckColumn用于性别有点奇怪。为什么不让一个具有组合框的列供用户选择性别？

但如果你必须这样做，我有一个解决方案。我的解决方案基于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'
});

虽然解决方案有效但我不推荐它，因为当extjs升级时实现可能会改变。例如对于extjs 3.3.1，您必须覆盖另一个方法，但不能覆盖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);
        }
    }

单击时EXTJS checkcolumns禁用

1 个答案: