javascript - 动态绑定(bind)组合的只读属性的 Extjs 问题

Question

我有一个带有 combobox 的小部件，我需要的流程是这样的，

1. 起初组合是禁用的。

2. 每一行都有编辑图标，当我点击编辑时，只有那个特定的组合应该被启用。

3. 然后当我保存记录时，启用的组合应该再次被禁用。

第 3 步不适合我。

{
    text: 'TC',
    dataIndex: 'scrTC',
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'combo',
        store: 'TCStore',
        valueField: 'value',
        displayField: 'displayValue',
        matchFieldWidth: false,
        bind: {
            readOnly: {
                isReadOnly
            }
        }
    }
}

我也试过 onwidgetattach 方法，但是保存后这个方法没有被调用，所以它不起作用。

onWidgetAttach: function(column, widget, record) {
    if (condition) {
        widget.setReadOnly(false);
    } else {
        widget.setReadOnly(true);
    }
}

有人有想法吗？

编辑 2:

我已将 readOnly:true 动态插入到我的叶记录中。

在 View 模型中创建一个 isReadOnly 函数，

Ext.define('MainViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',
    data: {
        isReadOnly: function (record) {
            return record.get('readOnly');
        }
    }
});

在 treeGrid 中，

{
        text: 'TC',
        dataIndex: 'scrTC',
        xtype: 'widgetcolumn',
        widget: {
            xtype: 'combo',
            store: 'TCStore',
            valueField: 'value',
            displayField: 'displayValue',
            matchFieldWidth: false,
            bind: {
                readOnly: '{isReadOnly}'
            }
        }
    }

在第一次加载时，组合框按预期是只读的，但是当我单击行中的编辑按钮时，它会在下面创建一个新行并且我已设置 readOnly=false。但是组合框仍然没有绑定(bind)为 readOnly false n 使其可编辑。

Answer 1

对于widgetcolumn，您需要使用record.readOnly为 combobox 绑定(bind)配置.像这样

bind: {
    readOnly: '{record.readOnly}'
}

您可以在此处查看工作 fiddle .

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create({
            xtype: 'grid',
            title: 'Binding Example',

            width: '100%',

            viewModel: {
                stores: {
                    gridStore: {
                        type: 'store',
                        fields: ['name', 'abrr', {
                            //This readOnly for widgetcolumn of combobox
                            name: 'readOnly',
                            //By default vlaue is true
                            defaultValue: true,
                            type: 'boolean'
                        }],
                        data: [{
                            name: 'Substation A',
                            "abbr": "AL",
                            readOnly: true
                        }, {
                            name: 'Substation B',
                            "abbr": "AK"
                        }, {
                            name: 'Substation C',
                            "abbr": "AZ",
                        }, {
                            name: 'Substation D',
                            "abbr": "AK"
                        }]
                    },
                    states: {
                        type: 'store',
                        fields: ['abbr', 'name'],
                        data: [{
                            "abbr": "AL",
                            "name": "Alabama"
                        }, {
                            "abbr": "AK",
                            "name": "Alaska"
                        }, {
                            "abbr": "AZ",
                            "name": "Arizona"
                        }]
                    }
                }
            },

            bind: '{gridStore}',
            columns: [{
                text: 'Name',
                flex: 1,
                dataIndex: 'name',
                width: 120
            }, {
                text: 'Select',
                flex: 1,
                xtype: 'widgetcolumn',
                dataIndex: 'abbr',
                widget: {
                    xtype: 'combo',
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'abbr',
                    bind: {
                        store: '{states}',
                        readOnly: '{record.readOnly}'
                    }
                }

            }, {
                text: 'Edit',
                width: 50,
                xtype: 'widgetcolumn',
                widget: {
                    xtype: 'button',
                    iconCls: 'x-fa fa-edit',
                    handler: function (btn) {
                        //Set the read only fase on button click
                        btn.getWidgetRecord().set('readOnly', false);
                    }
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});