3

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

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

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

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

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

5 回答 5

2

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

于 2014-10-23T20:07:22.537 回答
1

我意识到这是一个旧帖子，但我遇到了同样的问题。恕我直言，这是一个相当严重的问题，因为它可能会在您不知情的情况下导致数据问题。在我的情况下，我还将几个复选框设置为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);
    }
于 2014-03-26T14:18:59.127 回答
1

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

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
}
于 2012-11-14T02:32:28.377 回答
1

请注意，Mark Wagoner 的回答破坏了其他组件的任何高级组件/功能，因为它直接获取值而不是获取 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: requires: ['YourAppName.override.Field'],

于 2014-10-23T18:06:19.803 回答
0

到目前为止我还没有遇到过这个问题，但是我使用 update() 方法而不是 setValue() 来更新我的模型。也许它以不同的方式处理禁用的字段？或者，由于我们刚刚开始主要测试，我可能也需要这个答案？-- 这是 Form.update 方法的基本用法，假设 form 是 Ext.form.Panel 并且 this.record 是模型实例：

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

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

于 2012-11-13T17:09:23.380 回答