CODEWITHSUNDEEP
javascripthtmlformsextjs
GreenGiant
GreenGiant

Reputation: 5236

Update form record for disabled fields

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.

Upvotes: 3

Views: 3664

Answers (5)

Tarabass
Tarabass

Reputation: 3152

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.

Upvotes: 2

Brian Freyling
Brian Freyling

Reputation: 11

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'],

Upvotes: 1

Mark Wagoner
Mark Wagoner

Reputation: 1769

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

Upvotes: 1

lontivero
lontivero

Reputation: 5275

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
}

Upvotes: 1

Stephen Tremaine
Stephen Tremaine

Reputation: 954

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.

Upvotes: 0

Related Questions