Storing field values in cookies maybe useful not only during the debugging/developing the app but also for users who can continue working on the same browser next day.

Another method which makes user’s life lighter is to implement form template mechanisms. Users will be able to store some form states on the server and use them later.

 

Cookie names are generated at the base of prefix and the field name. This override must be used carefully to avoid cookie names overlapping/overriding. I have also added a possibility to store only valid field values.

Overriden classes:

Ext.define('overrides.form.field.Field', {
    override: 'Ext.form.field.Base',

    storeInCookie: false,
    cookiePrefix: false,
    storeValidValueInCookie: false,

    initComponent: function () {
        if (this.storeInCookie) {
            this.initCookieStorage();
        }
        this.callParent();
    },

    initCookieStorage: function () {
        this.setValueFromCookie();
        this.on('change', this.storeValueInCookie, this);
    },

    storeValueInCookie: function (field, value) {
        if (this.storeValidValueInCookie) {
            if (field.isValid()) {
                Ext.util.Cookies.set(this.getCookieName(), value);
            }
        } else {
            Ext.util.Cookies.set(this.getCookieName(), value);
        }
    },

    setValueFromCookie: function () {
        var setValue;
        if (this.cookiePrefix && this.name) {
            switch (this.xtype) {
            case 'datefield':
                setValue = new Date(Ext.util.Cookies.get(this.getCookieName()));
                break;
            default:
                setValue = Ext.util.Cookies.get(this.getCookieName());
            }
            this.setValue(setValue);
        }
    },

    getCookieName: function () {
        return this.cookiePrefix + this.name;
    }
});

 

Ext.define('overrides.form.CheckboxGroup', {
    override: 'Ext.form.CheckboxGroup',

    storeInCookie: false,
    cookiePrefix: false,
    storeValidValueInCookie: false,

    initComponent: function () {
        this.callParent();
        if (this.storeInCookie) {
            this.initCookieStorage();
        }
    },

    initCookieStorage: function () {
        this.setValueFromCookie();
        this.on('change', this.storeValueInCookie, this);
    },

    storeValueInCookie: function (field, value) {
        if (this.storeValidValueInCookie) {
            if (field.isValid()) {
                Ext.util.Cookies.set(
                    this.getCookieName(),
                    Ext.encode(value)
                );
            }
        } else {
            Ext.util.Cookies.set(
                this.getCookieName(),
                Ext.encode(value)
            );
        }
    },

    setValueFromCookie: function () {
        var setValue;
        if (this.cookiePrefix && this.name) {
            setValue = Ext.util.Cookies.get(this.getCookieName());
            if(setValue) {
                this.setValue(Ext.decode(setValue));
            }
        }
    },

    getCookieName: function () {
        return this.cookiePrefix + this.name;
    }
});

 

Ext.define('overrides.form.RadioGroup', {
    override: 'Ext.form.RadioGroup',

    storeInCookie: false,
    cookiePrefix: false,
    storeValidValueInCookie: false,

    initComponent: function () {
        this.callParent();
        if (this.storeInCookie) {
            this.initCookieStorage();
        }
    },

    initCookieStorage: function () {
        this.setValueFromCookie();
        this.on('change', this.storeValueInCookie, this);
    },

    storeValueInCookie: function (field, value) {
        if (this.storeValidValueInCookie) {
            if (field.isValid()) {
                Ext.util.Cookies.set(
                    this.getCookieName(),
                    Ext.encode(value)
                );
            }
        } else {
            Ext.util.Cookies.set(
                this.getCookieName(),
                Ext.encode(value)
            );
        }
    },

    setValueFromCookie: function () {
        var setValue;
        if (this.cookiePrefix && this.name) {
            setValue = Ext.util.Cookies.get(this.getCookieName());
            if(setValue) {
                this.setValue(Ext.decode(setValue));
            }
        }
    },

    getCookieName: function () {
        return this.cookiePrefix + this.name;
    }
});

I have added also ‘vtypes‘ for IP address validation.

Ext.define('overrides.form.field.VTypes', {
    override: 'Ext.form.field.VTypes',

    IPAddress: function (value) {
        return this.IPAddressRe.test(value);
    },
    IPAddressRe: /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/,
    IPAddressText: 'Must be a numeric IP address',
    IPAddressMask: /[\d\.]/i
});

To test the sample just set some fields of the form and reload application in fiddle.