如何在 ExtJS 中设置单个字段脏
How to Set Single Field Dirty in ExtJS
问题:我们在表单上切换字段。当显示 secondField 而不是 firstField 时,表单就会更改。但是 secondField 仍然被标记为不脏,因为两个字段都保持不变。显示 secondField 应该总是使它和表单(模型)变脏。
研究:setDirty() 方法在整个记录上完成,setValue() 按预期运行,但闻起来像 hack,不能用于各种字段类型(文本字段、组合框)。
问题:如何手动设置更改为调用保存其数据的单个表单字段状态?
您将数据状态与表单可视化混淆了。默认情况下,"field is shown" 与数据无关,因此您需要显式创建一个。这可以通过在切换时更改一些数据来完成,或者换种方式——在更改数据时切换。
例如,可以在 checking/unchecking 表示表单数据的复选框字段上进行切换(另请参阅 fiddle):
Ext.create('Ext.form.Panel', {
viewModel: {
type: 'default'
},
items: [
{
xtype: 'checkbox',
reference: 'toggle',
itemId: 'toggle',
boxLabel: 'Toggle',
hidden: true
},
{
xtype: 'button',
text: 'Toggle',
enableToggle: true,
toggleHandler: function() {
var form = this.up('form'),
checkbox = form.child('#toggle');
checkbox.setValue(!checkbox.getValue());
console.log(form.isDirty() ? 'Dirty!' : 'Not dirty');
}
},
{
xtype: 'textfield',
name: 'firstField',
fieldLabel: 'First Field',
bind: {
hidden: '{toggle.checked}'
}
},
{
xtype: 'textfield',
name: 'secondField',
fieldLabel: 'Second Field',
bind: {
hidden: '{!toggle.checked}'
}
}
],
renderTo: Ext.getBody()
});
问题:我们在表单上切换字段。当显示 secondField 而不是 firstField 时,表单就会更改。但是 secondField 仍然被标记为不脏,因为两个字段都保持不变。显示 secondField 应该总是使它和表单(模型)变脏。
研究:setDirty() 方法在整个记录上完成,setValue() 按预期运行,但闻起来像 hack,不能用于各种字段类型(文本字段、组合框)。
问题:如何手动设置更改为调用保存其数据的单个表单字段状态?
您将数据状态与表单可视化混淆了。默认情况下,"field is shown" 与数据无关,因此您需要显式创建一个。这可以通过在切换时更改一些数据来完成,或者换种方式——在更改数据时切换。
例如,可以在 checking/unchecking 表示表单数据的复选框字段上进行切换(另请参阅 fiddle):
Ext.create('Ext.form.Panel', {
viewModel: {
type: 'default'
},
items: [
{
xtype: 'checkbox',
reference: 'toggle',
itemId: 'toggle',
boxLabel: 'Toggle',
hidden: true
},
{
xtype: 'button',
text: 'Toggle',
enableToggle: true,
toggleHandler: function() {
var form = this.up('form'),
checkbox = form.child('#toggle');
checkbox.setValue(!checkbox.getValue());
console.log(form.isDirty() ? 'Dirty!' : 'Not dirty');
}
},
{
xtype: 'textfield',
name: 'firstField',
fieldLabel: 'First Field',
bind: {
hidden: '{toggle.checked}'
}
},
{
xtype: 'textfield',
name: 'secondField',
fieldLabel: 'Second Field',
bind: {
hidden: '{!toggle.checked}'
}
}
],
renderTo: Ext.getBody()
});