Javascript 动态绑定combo只读属性的Extjs问题

我有一个带有

组合框的小部件

&我需要的流是这样的

首先，组合被禁用

每一行都有编辑图标&当我单击编辑时，只应启用特定的组合

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

第三步对我不起作用

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

我还尝试了

onwidgetatch

方法，但保存后，该方法未被调用，因此无法工作

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

有人有主意吗

编辑2：

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

在视图模型中创建isReadOnly函数

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

在树丛中

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

---

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

您需要使用

record.readOnly

来绑定配置。像这样

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

您可以在这里查看工作

代码片段

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

---

是否也必须使用viewModel绑定存储？不，这不是必须的。但是如果您使用的是viewmodel，那么您可以根据需要进行绑定。@Narandra Jadhav我已经编辑了上面的问题和我的问题。感谢创建工作，以便我可以尝试解决问题。