keep showing side message on error

[ext_fan]

Hi - please tell me how to show the side validation error message when the field is invalid, instead of showing the error message on mouse over.

I know its a fundamental doubt in using the invalid message format.

I have a requirement in that server side validation will happen on change of a field until the validation completes I need to show the message on side.

[carol.ext]

msgTarget

[ext_fan]

Hi - Thanks for the reply..but what im looking for is

msgTargetide and the error message should keep displaying.

msgTargetide will display error message only on hover but how to show the message in case of invalid.

I know we have option to show under or using custom div element. I would like to accompolish in the side.

[ext_fan]

Please anyone throw your idea in displaying the invalid message without mouse over..

[devnull]

Well the message popup is an Ext tooltip, so maybe theres a way to configure the one that gets generated.

[ext_fan]

Hi Dev...Thanks for your reply.

Can you pass a sample to configure the error icon tooltip ...

Or at least let me know how to fire the event of erroricon on mouse over....

[samuel.ng]

You can define a msgTarget type, let's say msgTarget : "sideText" (based on "under" & "side")

Just as a quick demo, you may try to insert the following codes in ext-all.js:

• After the segment "alignErrorEl: function() {...},"

            alignErrorSideEl : function() {
                this.errorSideEl.setWidth(this.getErrorCt().getWidth(true) - 20)
                this.errorSideEl.alignTo(this.el, "tl-tr", [20, 0])
            },

• After the segment "side : {...},"

    sideText : {
        mark : function(b, c) {
            b.el.addClass(b.invalidClass);
            if (!b.errorSideEl) {
                var a = b.getErrorCt();
                if (!a) {
                    b.el.dom.title = c;
                    return
                }
                b.errorSideEl = a.createChild({
                            cls : "x-form-invalid-msg"
                        });
                if (b.ownerCt) {
                    b.ownerCt.on("afterlayout", b.alignErrorSideEl, b);
                    b.ownerCt.on("expand", b.alignErrorSideEl, b)
                }
                b.on("resize", b.alignErrorSideEl, b);
                b.on("destroy", function() {
                            Ext.destroy(this.errorSideEl)
                        }, b)
            }
            b.alignErrorSideEl();
            b.errorSideEl.update(c);
            Ext.form.Field.msgFx[b.msgFx].show(b.errorSideEl, b)
        },
        clear : function(a) {
            a.el.removeClass(a.invalidClass);
            if (a.errorSideEl) {
                Ext.form.Field.msgFx[a.msgFx].hide(a.errorSideEl, a)
            } else {
                a.el.dom.title = ""
            }
        }
    },