CODEWITHSUNDEEP
formsextjsrecordextjs4radio-group
TigrouMeow
TigrouMeow

Reputation: 1036

ExtJS 4, issue with a radiogroup which is always "dirty"

I'm using a very simple RadioGroup within a form. My form is filled-up with a record via the method form.loadRecord(), and later I update the record depending on the values in my form using form.updateRecord(). It works, I can load record and save them, no problem at this point.

The issues comes up when I want to check the dirty status of the form, using its method isDirty(). It's ALWAYS 'true'. I basically know why and that's because the RadioGroup's original value is always equal to "0", and is not set by loadRecord() (it just apply the value on the adhoc radiogroup's child).

-> form.getFields().items[10].originalValue = Rating: "0"

-> form.getFields().items[10].getValue() = Rating: "3"

I should add that NONE of the others fields are dirty (trackResetOnLoad is set on true on the form, that allows the form to be reset when a record is loaded). This issue happens only with the radiogroup.

Here is the code of the radiogroup I use. I tried to add "name: 'Rating'" to the radiogroup but it crashes (apparently it was working in ExtJS 3.x).

xtype : 'radiogroup',
fieldLabel: 'Rating',
items: [
    {
        boxLabel  : 'Zero',
        name      : 'Rating',
        inputValue: "0"
    }, {
        boxLabel  : 'One',
        name      : 'Rating',
        inputValue: "1"
    }, {
        boxLabel  : 'Two',
        name      : 'Rating',
        inputValue: "3"
    }
]

Thanks for your help!

Upvotes: 1

Views: 4764

Answers (2)

Vais Salikhov
Vais Salikhov

Reputation: 61

This is still a bug as of version 4.0.7. Here is a short override to fix it:

Ext.override(Ext.form.field.Radio, {
    resetOriginalValue: function () {
        //Override the original method inherited from Ext.form.field.Field: 
        //  this.originalValue = this.getValue();
        //  this.checkDirty();
        this.getManager().getByName(this.name).each(function (item) {
            item.originalValue = item.getValue();
            item.checkDirty();
        });
    }
});

(You can also read the discusion and my original response in a Sencha forum thread here: http://www.sencha.com/forum/showthread.php?182524-RadioField-and-isDirty-problem&p=745308&viewfull=1#post745308)

Research/details:

Start with the source for Ext.form.Basic, setValues method. Inside the setValues method there is a helper function setVal that looks like this:

function setVal(fieldId, val) {
    var field = me.findField(fieldId);
    if (field) {
        field.setValue(val);
        if (me.trackResetOnLoad) {
            field.resetOriginalValue();
        }
    }
}

You can see it calls setValue on the first field that it finds by given fieldId (field name), then resetOriginalValue. Let's take a look at setValue in Ext.form.field.Radio:

setValue: function(v) {
    var me = this,
        active;

    if (Ext.isBoolean(v)) {
        me.callParent(arguments);
    } else {
        active = me.getManager().getWithValue(me.name, v).getAt(0);
        if (active) {
            active.setValue(true);
        }
    }
    return me;
}

This specialized setValue method takes into account that there are multiple radios with the same name, and that setValue is called on just one of them (the first one found by calling findField in basic form's setValues).

So, setValue for radio field has been made "smart". Now, what about resetOriginalValue for the radio field? A specialized resetOriginalValue for radio fields was never implemented - it is simply inherited from the default in Ext.form.field.Field, which looks like this: 

resetOriginalValue: function() {
    this.originalValue = this.getValue();
    this.checkDirty();
}

The fix then is to make resetOriginalValue for radios as "smart" as their setValue, i.e. take into account that there are multiple radio fields with the same name in a radio group.

Upvotes: 1

JamesHalsall
JamesHalsall

Reputation: 13475

This is just the behaviour of the form in general, obviously by default a form has no field values and when you load data it obviously changes and makes the form dirty.

When I've had to rely on the isDirty() method I've reset the form field's value manually...

Ext.getCmp('fieldId').resetOriginalValue();

Whilst this isn't a fix, it should be ok as a temporary workaround. Looks like this could be a bug, may be worth posting on the Sencha forum

Upvotes: 1

Related Questions