首页 > Extjs CheckboxModel 自定义后HeaderCheckbox的点击事件失效

Extjs CheckboxModel 自定义后HeaderCheckbox的点击事件失效

需求

在一个gridpanel中有展示从后端得到的数据, 其中根据需要使某些行变灰,同时使checkbox不可点击(后面有业务逻辑需要将部分行变灰,附带的行前面的checkbox禁用)

现在变灰以做,所以只看CheckboxModel的禁用

实现与问题

我在实现时是监听了beforeselect 事件,但是这个事件使用后对CheckboxModel 造成了一些影响,如使HeaderCheckbox失效. 重写HeaderCheckbox的事件还是不行

问题出现场景

当点击某行触发beforeselect事件,进入逻辑判断后,则HeaderCheckbox失效---点击无效

代码及效果示例

https://fiddle.sencha.com/#fiddle/k00

谢谢大家的帮助


感觉这个需求十分奇怪,明明不希望选择到的项,还要求能够通过全选选择到……

如果非要这样实现,可以通过一系列 hack 来完成。下面是演示怎么通过 hack selectAlldoSelect 来达到不选择某些行的目的。如果需要完整实现的话还需要用类似手法实现 deselectAlldoDeselect 才行。

具体原理就自己去读一下ExtJS Ext.selection.Model 源码吧~

javascriptExt.define('Ext.ux.selection.CheckboxModel', {
    override: 'Ext.selection.CheckboxModel',
    statusFieldName: '',
    statusFalseValue: false,

    selectAll: function() {
        this.batchSelection = true;
        this.callParent(arguments);
        this.batchSelection = false;
    },

    doSelect: function(records, keepExisting, suppressEvent) {
        var me = this;

        if (me.statusFieldName && !this.batchSelection) {
            if (Ext.isArray(records)) {
                records = Ext.Array.filter(records, function(record) {
                    return record.get(me.statusFieldName) !== me.statusFalseValue;
                });
            } else {
                if (records.get(me.statusFieldName) === me.statusFalseValue) {
                    return;
                }
            }
        }

        me.callParent([records, keepExisting, suppressEvent]);
    }
});
【热门文章】
【热门文章】