【发布时间】：2015-10-20 20:33:24
【问题描述】：
我在找出解决此问题的最佳方法时遇到了一些麻烦...我应该使用带有已加载记录的表单（让我可以轻松访问每个字段的验证），还是应该让绑定完成所有工作工作（可以更多地利用 ViewModel）。我无法决定，所以目前，我正在使用两者......我正在设置一个 viewModel 记录并使用相同的记录加载我的表单。我真的不喜欢这种方法，但它可以完成工作。除了这篇文章的重点之外......更多的是我为什么要这样做的背景。
无论如何，我正在尝试弄清楚如何利用此表单/视图模型记录来确定 ComboBox 上是否发生了更改。当您编辑表单中的字段时，表单的记录似乎没有得到更新。我假设这就是updateRecord 存在的原因。但是，我不想在每次更改字段后都运行 updateRecord...有没有办法将其设置为“绑定”或自动更新表单的记录？
这是example。我有一个包含两个项目的网格，一个名称和它们的动物类型。当用户单击编辑图标时，会弹出一个窗口，其中包含一个表单和这两个项目。动物类型是一个组合框，当用户将其更改为 Human 时，我想显示 Human Trait 字段并隐藏 Dog Trait 字段，反之亦然。
我知道我可以听取组合框的选择并更新视图模型的记录或在其中进行切换，但理想情况下，如果我的视图模型的记录是从字段的输入变化。有没有人对如何做到这一点有任何指导或想法？或者也许如何改善流程？
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'animal',
type: 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'MyModel',
proxy: {
type: 'memory'
},
data: [{
name: 'Poochie',
animal: 'Dog'
}, {
name: 'Homer',
animal: 'Human'
}]
});
Ext.define('MyEditWindowViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myeditwindow',
formulas: {
hideHumanField: function(getter) {
var hide = false;
var currentRecord = getter('currentRecord');
console.log(currentRecord.getData());
if (currentRecord.get('animal') === 'Dog') {
hide = true;
}
return hide;
}
},
stores: {
animalStore: {
fields: ['name'],
proxy: {
type: 'memory'
},
data: [{
name: 'Human'
}, {
name: 'Dog'
}]
}
}
});
Ext.define('MyEditWindowViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myeditwindow',
init: function() {
var viewModel = this.getViewModel();
this.getViewForm().loadRecord(viewModel.get('currentRecord'));
},
getViewForm: function() {
return this.lookupReference('myForm');
}
});
Ext.define('MyEditWindow', {
extend: 'Ext.window.Window',
controller: 'myeditwindow',
viewModel: {
type: 'myeditwindow'
},
autoShow: true,
height: 400,
width: 400,
modal: true,
title: 'Edit Window',
items: [{
xtype: 'form',
reference: 'myForm',
layout: {
type: 'vbox'
},
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
}, {
xtype: 'combo',
name: 'animal',
displayField: 'name',
valueField: 'name',
bind: {
store: '{animalStore}'
},
fieldLabel: 'Type'
}, {
xtype: 'textfield',
name: 'humanField',
hidden: true,
bind: {
hidden: '{hideHumanField}'
},
fieldLabel: 'Human Trait'
}, {
xtype: 'displayfield',
name: 'dogField',
hidden: true,
bind: {
hidden: '{!hideHumanField}'
},
fieldLabel: 'Dog Trait',
value: 'Cannot set trait'
}]
}]
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
xtype: 'actioncolumn',
items: [{
icon: 'http://icongal.com/gallery/download/93429/256/png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
Ext.create('MyEditWindow', {
viewModel: {
data: {
currentRecord: grid.getStore().getAt(rowIndex)
}
}
});
}
}]
}, {
text: 'Name',
dataIndex: 'name'
}, {
text: 'Animal Type',
dataIndex: 'animal'
}],
renderTo: Ext.getBody()
});
}
});
我认为我的问题与this SO question 非常相似，但答案无济于事，因为仅在首次创建视图时才检查phantom 属性...而不是在后续更改之后。
还发现了this thread，我相信它描述了同样的问题。
【问题讨论】：
标签： javascript extjs mvvm extjs5