模型中的位掩码到布尔转换答案

【问题标题】：Bitmask to boolean conversion in the model模型中的位掩码到布尔转换
【发布时间】：2018-02-03 02:10:38
【问题描述】：

我有一个从后端接收 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.form.CheckboxGroup？它提供了“获取、设置和验证整个复选框组的方法。”

标签： checkbox extjs

【解决方案1】：

我认为复选框组组件是渲染复选框和实现转换逻辑的理想选择。这是一个可重用的组件来进行位掩码的双向转换：

    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);
        }
    });

还有工作小提琴：https://fiddle.sencha.com/#view/editor&fiddle/2clg

edit 组件完成了 getModelData 实现，以支持与 form.getValues/form.updateRecord 一起使用。

【讨论】：

我已经对此进行了测试，但不幸的是，它不适用于form.loadRecord 和form.updateRecord，而且我似乎无法让它工作。 fiddle.sencha.com/#view/editor&fiddle/2cgc
默认情况下，form.getValues 方法（由 updateRecord 使用）忽略复选框组组件。我编辑了组件以按预期使用表单。

【解决方案2】：

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

字段上也有convert 和calculate 配置，但它们仅以一种方式进行转换。

【讨论】：