模型

Question

我有一个从后端接收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之间的关联绑定到布尔值，而不是位线掩码的部分

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

Answer 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

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

Answer 2

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

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