ExtJS -=- Mandatory fields in red

Hi

If you want to show mandatory fields in red to visually distinguish mandatory fields and optional fields, you can do this override.


In your CSS stylesheet

.error {
    background-color: #ffeeee !important;
    border-color: #ff7870 !important;
}

.custom-form-item {
    display: block;
    margin-bottom: 0px;
    zoom: 1;
}

.custom-form-text {
    border: 1px solid #B5B8C8;
    padding: 1px 3px;
    height: 22px !important;
} 

In your javascript

/*
 * We overrides the Ext's FormPanel because there's a but using IE7-8, FormPanel and textfields (and derivatives).
 * IE try to render the field but the bottom and top border and invisible. We need to override the border width...
 */
Ext.override(Ext.form.FormPanel, {
    initFields : function() {
        var f = this.form;
        var formPanel = this;
        var fn = function(c) {
            if (c.isFormField) {
                f.add(c);
            } else if (c.doLayout && c != formPanel) {


                Ext.applyIf(c, {
                    labelAlign: c.ownerCt.labelAlign,
                    labelWidth: c.ownerCt.labelWidth,
                    itemCls: c.ownerCt.itemCls
                });
                if (c.items) {
                    c.items.each(fn);
                }
            }
        };
        this.items.each(fn);
    }
});



/**
 * Override the Ext.form.Field to add some functionalities like max lenght...
 * @author Yann Laviolette
 *
 */
Ext.override(Ext.form.Field, {
    onRender : function(ct, position) {
        /**
            * If we specify a maxLenght for a field, the field doesn't accept more than X characters...
            */
        if (this.maxLength !== Number.MAX_VALUE && (this.getXType() === 'textfield' || this.getXType() === 'numberfield')) {
            this.autoCreate = {
                tag: 'input',
                type: 'text',
                size: '20',
                autocomplete: 'off',
                maxlength: this.maxLength
            };
        }

        if (this.maxLength !== Number.MAX_VALUE && (this.getXType() === 'textarea')) {
            this.autoCreate = {
                tag: 'textarea',
                type: 'text',
                size: '20',
                autocomplete: 'off',
                maxlength: this.maxLength,
                onkeyup: "if (this.value.length > " + this.maxLength + ") { this.value = this.value.slice(0, " + this.maxLength + ") }",
                onchange: "if (this.value.length > " + this.maxLength + ") { this.value = this.value.slice(0, " + this.maxLength + ") }"
            };
        }

        Ext.form.Field.superclass.onRender.call(this, ct, position);

        if (!this.el) {
            var cfg = this.getAutoCreate();
            if (!cfg.name) {
                cfg.name = this.name || this.id;
            }
            if (this.inputType) {
                cfg.type = this.inputType;
            }
            this.el = ct.createChild(cfg, position);
        }
        var type = this.el.dom.type;
        if (type) {
            if (type == 'password') {
                type = 'text';
            }

            if (type == 'text') {
                this.el.addClass('custom-form-' + type);
            } else {
                this.el.addClass('x-form-' + type);
            }


        }

        this.invalidClass = "error";

        if(!this.allowBlank){
            this.cls = "error";
        }

        if (this.readOnly) {
            this.el.dom.readOnly = true;
        }
        if (this.tabIndex !== undefined) {
            this.el.dom.setAttribute('tabIndex', this.tabIndex);
        }

        this.el.addClass([this.fieldClass, this.cls]);
    },



    /**
        * Show the container including the label
        */
    showContainer: function() {
        this.enable();
        this.show();

        if (!Ext.isEmpty(this.getEl())) {
            this.getEl().up('.x-form-item').setDisplayed(true); // show entire container and children (including label if applicable)
        }


    },

    /**
        * Hide the container including the label
        */
    hideContainer: function() {
        this.disable(); // for validation
        this.hide();

        if (!Ext.isEmpty(this.getEl())) {
            this.getEl().up('.x-form-item').setDisplayed(false); // hide container and children (including label if applicable)
        }
    },

    /**
        * Hide / Show the container including the label
        * @param visible
        */
    setContainerVisible: function(visible) {
        if (this.rendered) {
            if (visible) {
                this.showContainer();
            } else {
                this.hideContainer();
            }
        }

        return this;
    }
});