需求
在一个gridpanel中有展示从后端得到的数据, 其中根据需要使某些行变灰,同时使checkbox不可点击(后面有业务逻辑需要将部分行变灰,附带的行前面的checkbox禁用)
现在变灰以做,所以只看CheckboxModel的禁用
实现与问题
我在实现时是监听了beforeselect 事件,但是这个事件使用后对CheckboxModel 造成了一些影响,如使HeaderCheckbox失效. 重写HeaderCheckbox的事件还是不行
问题出现场景
当点击某行触发beforeselect事件,进入逻辑判断后,则HeaderCheckbox失效---点击无效
代码及效果示例
https://fiddle.sencha.com/#fiddle/k00
谢谢大家的帮助
感觉这个需求十分奇怪,明明不希望选择到的项,还要求能够通过全选选择到……
如果非要这样实现,可以通过一系列 hack 来完成。下面是演示怎么通过 hack selectAll
和 doSelect
来达到不选择某些行的目的。如果需要完整实现的话还需要用类似手法实现 deselectAll
和 doDeselect
才行。
具体原理就自己去读一下ExtJS Ext.selection.Model 源码吧~
javascript
Ext.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]); } });