动态绑定 readOnly 属性 组合的 Extjs 问题
Extjs Issue with binding readOnly property of combo dynamically
我有一个带有 combobox
的小部件,我需要的流程是这样的,
一开始组合是禁用的。
每一行都有编辑图标,当我点击编辑时,只有那个特定的组合应该被启用。
然后当我保存记录时,启用的组合应该再次被禁用。
第 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 动态插入到我的叶子记录中。
在视图模型中创建一个 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。但是组合框仍然没有绑定为 readOnly false n 使其可编辑。
您需要为 widgetcolumn
to bind config for combobox
使用 record.readOnly
。像这样
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()
});
}
});
我有一个带有 combobox
的小部件,我需要的流程是这样的,
一开始组合是禁用的。
每一行都有编辑图标,当我点击编辑时,只有那个特定的组合应该被启用。
然后当我保存记录时,启用的组合应该再次被禁用。
第 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 动态插入到我的叶子记录中。
在视图模型中创建一个 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。但是组合框仍然没有绑定为 readOnly false n 使其可编辑。
您需要为 widgetcolumn
to bind config for combobox
使用 record.readOnly
。像这样
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()
});
}
});