更新已禁用字段的表單記錄

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();

如果這對您不起作用，我建議編寫一個類似命名的方法，並擴展表單面板以包含它，獲取值數組然后遍歷每個值並僅在它不為空時更新它。