javascript - ExtJS 5 : confusion with persisting changes to view model/form record

Question

我在找出解决这个问题的最佳方法时遇到了一些麻烦...我应该使用带有加载记录的表单(让我可以轻松访问每个字段的验证)，还是应该让绑定(bind)完成所有工作工作的一部分(可以更多地利用 ViewModel)。我无法决定，所以目前，我正在利用两者......我正在设置一个 viewModel 记录并使用相同的记录加载我的表单。我真的不喜欢这种方法，但它可以完成工作。这不是这篇文章的重点……更多的是我这样做的背景。

无论如何，我试图弄清楚如何利用此表单/ View 模型记录来确定 ComboBox 上是否发生了更改。当您编辑表单中的字段时，表单的记录似乎没有更新。我假设这就是原因 updateRecord存在。但是，我不想在每次更改字段后都运行 updateRecord...有没有办法将其设置为“绑定(bind)”或自动更新表单的记录？

这是一个example 。我有一个包含两个项目的网格，一个名称和它们的动物类型。当用户单击编辑图标时，会弹出一个窗口，其中包含一个表单和这两个项目。动物类型是一个组合框，当用户将其更改为人类时，我想显示人类特征字段并隐藏狗特征字段，反之亦然。

我知道我可以监听组合框的选择并更新 View 模型的记录或在其中进行切换，但理想情况下，如果我的 View 模型的记录是从字段的记录更新的，我就不必执行任何操作输入变化。有人对如何做到这一点有任何指导或想法吗？或者也许如何改善流程？

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 非常相似，但答案没有帮助，因为仅在首次创建 View 时才检查 phantom 属性...而不是在后续更改后检查。

还发现this thread ，我相信它描述了同样的问题。

Answer 1

编辑:好的，刚刚看到这个问题已经有将近一年了。然而，也许有人会有点“啊哈!”从我的回答:-)

我在我的 fiddle 中稍微改变了你的代码:https://fiddle.sencha.com/#fiddle/19pe

总结:

1. 我删除了 View 模型中的公式，转而使用模型中的计算字段 isHuman。
2. 我在所有字段上添加了对 currentRecord 的绑定(bind)，因此无需调用 loadRecord() 方法。
3. 我将“Trait”字段的 hidden 属性绑定(bind)到模型的计算 isHuman 字段。

如果您确实需要验证字段值以在表单中显示错误，您还可以使用模型验证。查看文档中的“验证器”部分:http://docs.sencha.com/extjs/5.1/5.1.2-apidocs/#!/api/Ext.data.Model