1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    jluna is on a distinguished road

      0  

    Default Help with Checkbox, need to mark invalid

    Help with Checkbox, need to mark invalid


    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.

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    jluna is on a distinguished road

      0  

    Default


    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.

    Code:
    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);
    };

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    9
    Vote Rating
    0
    rborg is on a distinguished road

      0  

    Default additions to checkbox

    additions to checkbox


    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:
    Code:
        //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:
    Code:
    /*
        This fixes the checkbox validation styles for checkbox group
    */
    
    .x-form-check-group .x-column {
        overflow: visible;
        margin-right: 3px;
    }

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar