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

Question

I have a complex form in ExtJS 4, where various parts of the form are dynamically enabled or disabled based on what the user selects from some of the form fields. Whenever I disable a form field, I also clear any value it currently has in it.

I have a model class representing the form. To load the form, I use form.loadRecord(model) . To update my model when the user "submits" the form, I use model.set(form.getValues()) .

The problem is that ext's getValues() implementation skips form fields that are disabled. This causes problems in my case, because some of form fields that have changed values are disabled (ie. form fields whose values I cleared when I disabled them). As a result, these fields are not updated (cleared) in the model when I call model.set(...) .

What would be the best way to work around this problem? I've considered the following ideas, but none seems very good. If you have a better one, I'd like to hear it.

• Clear the model (set all fields to undefined) before calling model.setValues() . Unfortunately, there is no model.clear() method, so this gets ugly quickly - I have to get all fields and iterate over them, clearing each one individually.
• Clear model fields also when I disable and clear the form fields. This seems to violate separation of concerns and also means the model gets changed, even when the user chooses to cancel and not submit the form.
• Override ext's implementation of form.getValues() to not skip disabled fields. This is even more ugly because the actual code that needs to be changed is in the Ext.form.field.Field class, not Ext.form.Basic .

Answer 1

Disabled fields are commonly (not only extjs) always excluded from post data. Instead set fields readonly. The mean difference between readonly and disabled fields is just that.

Answer 2

This is the solution that you exposed in the thrid point: The only way you have to change this behaviour is override this method.

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

About your first point, isn´t .reject(false) useful?

The latest option could be override the getSubmitData for every single field in your form as follow:

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

Answer 3

I realize this is an old post but I have run into this same issue. IMHO this is a rather serious issue because it can cause data problems without you knowing about it. In my case I also set several check boxes to false when disabled but because of the way this works they were being left as true behind the scenes.

As a work around I now loop through all the fields in the form and manually update the record for each one. It's more work but I don't have to override any classes and the loop is generic enough that it will continue to work if/when the form definition is changed.

    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

Note that Mark Wagoner's answer breaks any advanced components / features of other components since it takes the value directly rather then getting the getSubmitValue(). I had to slightly modify Iontivero's answer as that was not the class I found Extjs calling at least in 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;
  }
});

then in Ext.application: requires: ['YourAppName.override.Field'],

Answer 5

I haven't encountered that problem so far, but I update my model using the update() method rather than the setValue(). Maybe it handles disabled fields differently? Or maybe I'm headed down a path to need this answer as well since we're just starting major testing? -- This is the basic usage of the Form.update method though, assuming form is an Ext.form.Panel and this.record is a model instance:

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

If that doesn't work for you, I would suggest writing a similarly named method and extending the form panel to include it that gets the array of values then goes through each one and updates it only if it's not null.