Question

我在解决这个问题的最佳方法时遇到了一些麻烦......我应该使用带有加载记录的表单（让我可以轻松访问每个字段的验证），还是应该让绑定完成所有操作工作（可以更多地利用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属性仅在首次创建视图时检查...而不是在后续更改之后。< / p>

还找到了this thread，我认为它描述了同样的问题。

Answer 1

编辑：好的，只是看到这个问题差不多有一年了。然而，也许有人会采取一点点＃AHA！＆＃34;从我的回答： - ）

我改变了你的代码：https://fiddle.sencha.com/#fiddle/19pe

总结：

我在您的视图模型中删除了公式，而不是模型中的计算字段isHuman。
我在所有字段上添加了currentRecord的绑定，因此无需调用loadRecord()方法。
我绑定了＆＃34; Trait＆＃34;的hidden属性字段到模型的计算isHuman字段。

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

ExtJS 5：对查看模型/表单记录的持续更改感到困惑

1 个答案: