动态绑定组合的只读属性的扩展问题

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：

我已经动态地插入了只读：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}'
}
}
}

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

Answer 1

你需要使用record.readOnlyforwidgetcolumn来绑定combobox的配置。喜欢这个

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