Highlight fields

JavaScript

// do this as mixin

Ext.form.Field.prototype.constructor = Ext.form.Field.prototype.constructor.createSequence(function() {
    this.addEvents('valueset');
    this.addEvents('readonly');
});

Ext.form.Field.prototype.initComponent = Ext.form.Field.prototype.initComponent.createSequence(function () {
    var me = this;
    if (me.highlightBlank) {
        me.setHighlightBlank(me.highlightBlank);
    }
});

Ext.form.Field.prototype.setHighlightBlank = function(value) {
    var me = this;
    if(me.highlightBlankRendered === undefined) {
        var toggleRequired = function () {
            // check if el exists, otherwise do nothing
            if (Ext.isDefined(me.el)) {
                if(me.highlightBlank) {
                    if (Ext.isEmpty(me.getValue()) && !me.disabled && !me.readOnly) {
                        me.el.addClass('required-field');
                    } else {
                        me.el.removeClass('required-field');
                    }
                } else {
                    me.el.removeClass('required-field');
                }
            }
        };
        me.on('valueset', toggleRequired);
        me.on('change', toggleRequired);
        me.on('afterrender', toggleRequired);
        me.on('disable', toggleRequired);
        me.on('enable', toggleRequired);
        me.on('readonly', toggleRequired);
        me.highlightBlankRendered = true;
    }
    me.highlightBlank = value;
    me.fireEvent('valueset', me);
};

Ext.form.Field.prototype.setValue = Ext.form.Field.prototype.setValue.createSequence(function() {
    if(this.highlightBlank) {
        this.fireEvent('valueset', this);
    }
});

Ext.onReady(function () {


});