更新已禁用字段的表单记录

Question

我在ExtJS 4中有一个复杂的表单，根据用户从某些表单字段中选择的内容，动态启用或禁用表单的各个部分。 每当我禁用表单字段时，我也会清除它当前具有的任何值。

我有一个表示表单的模型类。 要加载表单，我使用form.loadRecord(model) 。 要在用户“提交”表单时更新我的​​模型，我使用model.set(form.getValues()) 。

问题是ext的getValues()实现会跳过禁用的表单字段。 这会导致我的问题，因为一些已更改值的表单字段被禁用（即表单字段，其值在我禁用它时清除）。 因此，当我调用model.set(...)时，模型中不会更新（清除）这些字段。

解决这个问题的最佳方法是什么？ 我考虑过以下想法，但似乎都没有。 如果你有一个更好的，我想听听。

• 在调用model.setValues()之前清除模型（将所有字段设置为undefined model.setValues() 。 不幸的是，没有model.clear()方法，因此这很快变得丑陋 - 我必须获取所有字段并迭代它们，逐个清除每个字段。
• 当我禁用并清除表单字段时，也清除模型字段。 这似乎违反了关注点的分离，也意味着模型会发生变化，即使用户选择取消而不提交表单也是如此。
• 覆盖ext的form.getValues()实现，以不跳过禁用的字段。 这更难看，因为需要更改的实际代码位于Ext.form.field.Field类中，而不是Ext.form.Basic 。

Answer 1

禁用字段通常（不仅仅是extj）总是从发布数据中排除。 而是只读取字段。 readonly和disabled字段之间的平均差异就是这样。

Answer 2

这是您在第三点中公开的解决方案：您必须更改此行为的唯一方法是覆盖此方法。

Ext.override('Ext.form.field.Field', {
    getSubmitData: function() {
        var me = this,
            data = null;
        if (!me.isFileUpload()) {
            data = {};
            data[me.getName()] = '' + me.getValue();
        }
        return data;
    }
});

关于你的第一点，不是.reject（false）有用吗？

最新的选项可以覆盖表单中每个字段的getSubmitData，如下所示：

{
   xtype: 'textfield',
   getSubmitData: this.getSubmitDataMyOwnVersion
}

Answer 3

我意识到这是一个老帖子，但我遇到了同样的问题。 恕我直言，这是一个相当严重的问题，因为它可能会在您不知情的情况下导致数据问题。 在我的情况下，我还在禁用时将几个复选框设置为false ，但由于其工作方式，它们在幕后保持true 。

作为一种解决方法，我现在遍历表单中的所有字段并手动更新每个字段的记录。 这是更多的工作，但我不必覆盖任何类，并且循环足够通用，如果/何时更改表单定义，它将继续工作。

    var fields = this.getForm().getForm().getFields();
    var record = this.getForm().getRecord();

    for (var i = 0; i < fields.length; i++) {
        var name = fields.items[i].name;
        var value = fields.items[i].value;
        record.set(name, value);
    }

Answer 4

请注意，Mark Waggoner的答案会破坏其他组件的任何高级组件/功能，因为它直接获取值而不是获取getSubmitValue（）。 我不得不略微修改Iontivero的答案，因为那不是我发现Extjs至少在4.2.0中调用的类。

Ext.define('YourAppName.override.Field', {
  override: 'Ext.form.field.Base',

  getSubmitData: function() {
      var me = this,
          data = null,
          val;
      if (me.submitValue && !me.isFileUpload()) {
          val = me.getSubmitValue();
          if (val !== null) {
              data = {};
              data[me.getName()] = val;
          }
      }
      return data;
  }
});

然后在Ext.application中：需要：['YourAppName.override.Field']，

Answer 5

到目前为止我还没有遇到过这个问题，但我使用update（）方法而不是setValue（）来更新我的模型。 也许它以不同方式处理禁用字段 或者也许我正在走上一条需要这个答案的道路，因为我们刚刚开始进行重大测试？ - 这是Form.update方法的基本用法，假设form是一个Ext.form.Panel而this.record是一个模型实例：

//Save record
form.updateRecord(this.record);
this.record.save();
this.record.commit();

如果这对您不起作用，我建议编写一个类似命名的方法，并扩展表单面板以包含它，获取值数组然后遍历每个值并仅在它不为空时更新它。