Providing visual cue for invalid form fields on inactive tab panels

Ext does a great job of providing visual cues when form fields are invalid, eg

But what happens if your form field is on an inactive tab panel? The visual cue can't be seen yet the form won't submit.

This is where the Ext.Fx come in handy.

By overriding the default markInvalid field functio, we can do a search through it's parents to find if it is on a tab panel.

If it is on a tab panel we can highlight the tab strip element using an Ext.Fx, I prefer to use frame with a red color for a consistent visual cue.

The override is as follows

    markInvalid : function(msg){
        if(!this.rendered || this.preventMark){
            return;
        }
        this.el.addClass(this.invalidClass);
        msg = msg || this.invalidText;
        switch(this.msgTarget){
            case 'qtip':
                this.el.dom.qtip = msg;
                this.el.dom.qclass = 'x-form-invalid-tip';
                if(Ext.QuickTips){
                    Ext.QuickTips.enable();
                }
                break;
            
            case 'title':
                this.el.dom.title = msg;
                break;
            
            case 'under':
                if(!this.errorEl){
                    var elp = this.el.findParent('.x-form-element', 5, true);
                    this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
                    this.errorEl.setWidth(elp.getWidth(true)-20);
                }
                this.errorEl.update(msg);
                Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
                break;
            case 'side':
                if(!this.errorIcon){
                    var elp = this.el.findParent('.x-form-element', 5, true);
                    this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
                }
                this.alignErrorIcon();
                this.errorIcon.dom.qtip = msg;
                this.errorIcon.dom.qclass = 'x-form-invalid-tip';
                this.errorIcon.show();
                this.on('resize', this.alignErrorIcon, this);
            break;
        
            default:
                var t = Ext.getDom(this.msgTarget);
                t.innerHTML = msg;
                t.style.display = this.msgDisplay;
            break;
        }
        var pp;
        var tp = this.findParentBy(function(p, c){
            if(p.isXType('tabpanel')){
                return true;
            }
            pp = p;
        });
        if(!Ext.isEmpty(pp,false) && !Ext.isEmpty(tp,false)){
            var e = tp.getTabEl(pp);
            if(!Ext.isEmpty(e)) {
                Ext.fly(e).frame("ff0000");
            }
        }
        this.fireEvent('invalid', this, msg);
    }

The key bit here is 

        var pp;
var tp = this.findParentBy(function(p, c){
if(p.isXType('tabpanel')){
return true;
}
pp = p;
});
if(!Ext.isEmpty(pp,false) && !Ext.isEmpty(tp,false)){
var e = tp.getTabEl(pp);
if(!Ext.isEmpty(e)) {
Ext.fly(e).frame("ff0000");
}
} 

What this does is search through the field's parents to find one of xtype tabpanel (ie a tab panel). If it finds one it then finds the tab strip element for the parent tab and frames it with a red border like so: