Checkbox 模型中位掩码到布尔值的转换

我有一个从后端接收int位掩码的模型：

{"user": 7, "group":5, "other":1}

现在我想显示一个带有如下复选框的表单：

user:   [X] read [X] write [X] execute
group:  [X] read [ ] write [X] execute
other:  [ ] read [ ] write [X] execute

用户可以在其中打开或关闭，然后在

store.sync

操作中将更新的位掩码发送回服务器

我知道如何创建和对齐复选框，但是表单中的ExtJS复选框通过复选框

name

和模型字段

name

之间的关联绑定到布尔值，而不是绑定到位掩码的部分

---

所以我必须在位掩码int和一堆布尔值之间来回转换。如何以可重用的方式实现它？

我认为复选框组组件是呈现复选框和实现转换逻辑的一个很好的候选组件。 下面是一个可重用组件，用于对位掩码进行双向转换：

    Ext.define('Fiddle.Bitmask', {
        extend: 'Ext.form.CheckboxGroup',
        xtype: 'fiddlebitmask',

        isFormField: true,
        columns: 3,

        items: [{
            boxLabel: 'Read',
            name: 'read',
            inputValue: 1,
            excludeForm: true,
            uncheckedValue: 0
        }, {
            boxLabel: 'Write',
            name: 'write',
            inputValue: 1,
            excludeForm: true,
            uncheckedValue: 0
        }, {
            boxLabel: 'Execute',
            name: 'exec',
            inputValue: 1,
            excludeForm: true,
            uncheckedValue: 0
        }],
        getModelData: function () {
            let obj = {};
            obj[this.name] = this.getValue();
            return obj;
        },
        setValue: function (value) {
            if (value) {
                var binary = Ext.String.leftPad((value).toString(2), 3, '0');
                value = {
                    read: Number(binary[0]),
                    write: Number(binary[1]),
                    exec: Number(binary[2])
                };
            }
            this.callParent([value]);
        },
        getValue: function () {
            var value = this.callParent();
            var binary = `${value['read']||0}${value['write']||0}${value['exec']||0}`
            return parseInt(binary, 2);
        }
    });

还有工作小提琴：

---

编辑用getModelData实现完成的组件，以支持form.getValues/form.updateRecord的使用。

您使用的是什么版本的Ext？如果您的版本支持，那么我将在ViewModel中进行转换，并将其绑定到视图

---

字段上也有和config，但它们仅以一种方式转换

你试过使用吗？它提供了“获取、设置和验证整个复选框组的方法”。我已经测试过了，但不幸的是，它不适用于

form.loadRecord

和

form.updateRecord

，似乎我无法让它工作。默认情况下，form.getValues方法（由updateRecord使用）忽略checkboxgroup组件。我编辑了组件，以便按预期使用表单。