ExtJS布尔列list过滤器false值失效与Ext.Data.Store问题修复
ExtJS booleancolumn配置list类型过滤器失效问题及修复方案
问题场景
我使用的是ExtJS 6(经确认该问题在7.4版本中也存在),现有一个使用booleancolumn xtype的表格,希望为该布尔列配置list类型过滤器。官方自带的布尔类型过滤器为单选按钮交互形式,不符合需求,我希望通过复选框选择「是/否」选项,测试后发现只有值为true的选项可以正常生效。
我的列配置如下:
{ header: 'Active' , dataIndex: 'inactive' , xtype: 'booleancolumn' , trueText: 'No' , falseText: 'Yes' , filter:{ type: 'list', options: [[true,"No"],[false, "Yes"]] } }
问题复现
另外测试发现,即便不配置options属性,让过滤器直接从store拉取数据也无法正常工作。查阅源码后我发现,过滤器会读取options配置,基于该数据自行创建Ext.Data.Store实例,可运行下方简单示例复现相同问题:
var teststore = new Ext.data.Store({ fields: [ 'id', 'text' ], data: [[true,"No"],[false, "Yes"]] });
问题根源
问题根源是布尔值false会被替换为动态生成的通用id,该问题出在Ext.data.Model构造函数的如下代码行:
if (!(me.id = id = data[idProperty]) && id !== 0) {
当该行判断条件结果为true时,框架就会用生成的id替换原有id。
修复方案
我自行修复的方案是在if判断的末尾添加&& id !== false,即可解决该问题。
目前我尚未完成全场景测试,但修复逻辑是合理的,此前0值也出现过同类问题,所以官方原有判断才会添加&& id !== 0的条件。
内容的提问来源于stack exchange,提问作者UUDDLRLRBA
相关产品推荐
相关产品推荐

