Help with Checkbox, need to mark invalid

[jluna]

Hello all,

I've been having trouble for a few days with what I thought would be a simple task. I have a form that has a checkbox that I need to mark invalid when my php code determines that the user is not able to check that box. When I change the checkbox xtype to textfield everything works just as I would like, but I've had no luck getting the checkbox to work the same way. Is there a way to inherit this behavior from the super class? How would I go about implementing this on a checkbox. To be clear, what I am after is a red exclamation-point image, that has the error text in a tool-tip.

Thanks for whatever help you can provide.

[jluna]

So I was able to come up with a solution, but I'm not sure if its too kludgy or not. I think what I did was implement the markInvalid and clearInvalid methods that were intentionally hidden for checkboxes. For some reason, this did not work unless I selected 'under'. Also, I got a yellow icon instead of the red exclamation point I wanted, but I fixed that and the position of the icon in the css.

Ext.form.Checkbox.prototype.markInvalid = function(msg){  
  this.msgTarget = 'under';
  Ext.form.Field.prototype.markInvalid.call(this, ' ');


  Ext.QuickTips.register({
    target: this.errorEl,
    text: msg,
    cls: "x-tip  x-form-invalid-tip"
  });
};
 
Ext.form.Checkbox.prototype.clearInvalid = function(){
  Ext.form.Field.prototype.clearInvalid.call(this);
};

[rborg]

I put something like this together a little while ago with help for 3.4. Its by no means perfect, but it may be of use to someone as a start...

js:

    //handles onclicks and fires a before edit check event
    //add suppress check event on set value
    //checkbox validation with vtypes
    //adds the styles, qtips and checkbox mark/clear invalid
    Ext.override(Ext.form.Checkbox, {
        // private
        initComponent : function(){
            Ext.form.Checkbox.superclass.initComponent.call(this);
            this.addEvents(
                /**
                 * @event check
                 * Fires when the checkbox is checked or unchecked.
                 * @param {Ext.form.Checkbox} this This checkbox
                 * @param {Boolean} checked The new checked value
                 */
                'check',
                'beforeedit'
            );
        },
        // private
        initEvents : function(){
            Ext.form.Checkbox.superclass.initEvents.call(this);
            this.mon(this.el, {
                scope: this,
                click: this.onClick,
                change: this.onChange
            });
        },

        onClick: function (e,o) 
        {
            //don't do anything on click because onChange fired at same time, so do all handling through there
        },
        onChange: function (e,o) 
        {
            var initStartValue = o.startValue;
            if (this.readOnly === true && !this.isXType('radio', true))
            {
                 e.preventDefault();
                 this.reset();
                 return false;
            } 
            if((this.fireEvent('beforeedit', this, o)) !== false)
            {
                if(this.el.dom.checked != this.checked)
                {
                    this.setValue(this.el.dom.checked);
                    return true;
                }
            }

            initStartValue = o.startValue;

            this.setValue(initStartValue);
            return false;
        },
        setValue : function(v, suppressCheckEvent){
            if(suppressCheckEvent == null)
            {
                suppressCheckEvent = false;
            }
            
            var checked = this.checked,
                inputVal = this.inputValue;
                
            if (v === false) {
                this.checked = false;
            } else {
                this.checked = (v === true || v === 'true' || v == '1' || (inputVal ? v == inputVal : String(v).toLowerCase() == 'on'));
            }
            
            if(this.rendered){
                this.el.dom.checked = this.checked;
                this.el.dom.defaultChecked = this.checked;
            }
            if(checked != this.checked){
                if(suppressCheckEvent !== true)
                {
                    this.fireEvent('check', this, this.checked);
                }
                if(this.handler){
                    this.handler.call(this.scope || this, this, this.checked);
                }
            }
            return this;
        },
        
        //this adds the styles, qtips and checkbox validation
        preventMark: false,
        onRender : function(ct, position){
            Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
            if(this.inputValue !== undefined){
                this.el.dom.value = this.inputValue;
            }
            this.wrap = this.el.wrap({cls: 'x-form-check-wrap'});
            if(this.boxLabel){
                this.childLabel = this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
            }
            if(this.checked){
                this.setValue(true);
            }else{
                this.checked = this.el.dom.checked;
            }
            
            if (Ext.isIE && !Ext.isStrict) {
                this.wrap.repaint();
            }
            this.resizeEl = this.positionEl = this.wrap;
        },

        markInvalid : function(msg){
            if (this.rendered && !this.preventMark) {
                msg = msg || this.invalidText;
        
            var mt = this.getMessageHandler();
                if(this.msgTarget){
                    this.wrap.addClass(this.invalidClass);
                    if(this.msgTarget == 'qtip')
                    {
                        Ext.QuickTips.register({
                            target: this.wrap,
                            text: msg,
                            cls: "x-tip  x-form-invalid-tip"
                        });
                        if(this.childLabel)
                        {
                            Ext.QuickTips.register({
                                target: this.childLabel,
                                text: msg,
                                cls: "x-tip  x-form-invalid-tip"
                            });
                        }    
                    }    
                }

            }
            
            this.setActiveError(msg);
        },
        clearInvalid : function(){
            if (this.rendered && !this.preventMark) {
                this.wrap.removeClass(this.invalidClass);
                 if(this.msgTarget){
                     if(this.msgTarget == 'qtip') {
                         Ext.QuickTips.unregister(this.wrap); 
                         Ext.QuickTips.unregister(this.childLabel); 
                     }
                 }
            }
            this.unsetActiveError();
        },
        
        //this is for vtype validation and errors
        vtype : null,
        getErrors: function(value) {
            var errors = Ext.form.Checkbox.superclass.getErrors.apply(this, arguments);
            
            value = Ext.isDefined(value) ? value : this.processValue(this.getRawValue());        
            
            if (Ext.isFunction(this.validator)) {
                var msg = this.validator(value);
                if (msg !== true) {
                    errors.push(msg);
                }
            }
            
            if (value.length < 1 || value === this.emptyText) {
                if (this.allowBlank) {
                    //if value is blank and allowBlank is true, there cannot be any additional errors
                    return errors;
                } else {
                    errors.push(this.blankText);
                }
            }
            
            if (!this.allowBlank && (value.length < 1 || value === this.emptyText)) { // if it's blank
                errors.push(this.blankText);
            }
            
            if (this.vtype) {
                console.log('into vtype test');
                var vt = Ext.form.VTypes;
                if(!vt[this.vtype](value, this)){
                    errors.push(this.vtypeText || vt[this.vtype +'Text']);
                }
            }
            
            if (this.regex && !this.regex.test(value)) {
                errors.push(this.regexText);
            }
            
            return errors;
        }

    });

css:

/*
    This fixes the checkbox validation styles for checkbox group
*/

.x-form-check-group .x-column {
    overflow: visible;
    margin-right: 3px;
}