# Checkbox.js

    /**
     * @class Ext.form.Checkbox
     * @extends Ext.form.Field
     * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
     * @constructor
     * Creates a new Checkbox
     * @param {Object} config Configuration options
     */
    Ext.form.Checkbox = Ext.extend(Ext.form.Field,  {
        /**
         * @cfg {String} checkedCls The CSS class to use when the control is checked (defaults to 'x-form-check-checked').
         * Note that this class applies to both checkboxes and radio buttons and is added to the control's wrapper element.
         */
        checkedCls: 'x-form-check-checked',
        /**
         * @cfg {String} focusCls The CSS class to use when the control receives input focus (defaults to 'x-form-check-focus').
         * Note that this class applies to both checkboxes and radio buttons and is added to the control's wrapper element.
         */
        focusCls: 'x-form-check-focus',
        /**
         * @cfg {String} overCls The CSS class to use when the control is hovered over (defaults to 'x-form-check-over').
         * Note that this class applies to both checkboxes and radio buttons and is added to the control's wrapper element.
         */
        overCls: 'x-form-check-over',
        /**
         * @cfg {String} mouseDownCls The CSS class to use when the control is being actively clicked (defaults to 'x-form-check-down').
         * Note that this class applies to both checkboxes and radio buttons and is added to the control's wrapper element.
         */
        mouseDownCls: 'x-form-check-down',
        /**
         * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered,
         * not those which are built via applyTo (defaults to 0, which allows the browser to manage the tab index).
         */
        tabIndex: 0,
        /**
         * @cfg {Boolean} checked True if the checkbox should render already checked (defaults to false)
         */
        checked: false,
        /**
         * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
         * {tag: "input", type: "checkbox", autocomplete: "off"}).
         */
        defaultAutoCreate: {tag: 'input', type: 'checkbox', autocomplete: 'off'},
        /**
         * @cfg {String} boxLabel The text that appears beside the checkbox (defaults to '')
         */
    // holder
    /***
         * @cfg {String} inputValue The value that should go into the generated input element's value attribute
         * (defaults to undefined, with no value attribute)
         */
    // holder
    /***
         * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of
         * handling the check event). The handler is passed the following parameters:
         * <div class="mdetail-params"><ul>
         * <li><b>checkbox</b> : Ext.form.Checkbox<div class="sub-desc">The Checkbox being toggled.</div></li>
         * <li><b>checked</b> : Boolean<div class="sub-desc">The new checked state of the checkbox.</div></li>
         * </ul></div>
         */
    // holder
    /***
         * @cfg {Object} scope An object to use as the scope ("this" reference) of the {@link #handler} function
         * (defaults to this Checkbox).
         */

        // private
        actionMode: 'wrap',

        // private
        baseCls: 'x-form-check',

        // 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'
            );
        },

        // private
        initEvents : function(){
            Ext.form.Checkbox.superclass.initEvents.call(this);
            this.initCheckEvents();
        },

        // private
        initCheckEvents : function(){
            this.innerWrap.removeAllListeners();
            this.innerWrap.addClassOnOver(this.overCls);
            this.innerWrap.addClassOnClick(this.mouseDownCls);
            this.innerWrap.on('click', this.onClick, this);
            this.innerWrap.on('keyup', this.onKeyUp, this);
        },

        // private
        onRender : function(ct, position){
            Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
            if(this.inputValue !== undefined){
                this.el.dom.value = this.inputValue;
            }
            this.el.addClass('x-hidden');

            this.innerWrap = this.el.wrap({
                tabIndex: this.tabIndex,
                cls: this.baseCls+'-wrap-inner'
            });
            this.wrap = this.innerWrap.wrap({cls: this.baseCls+'-wrap'});

            if(this.boxLabel){
                this.labelEl = this.innerWrap.createChild({
                    tag: 'label',
                    htmlFor: this.el.id,
                    cls: 'x-form-cb-label',
                    html: this.boxLabel
                });
            }

            this.imageEl = this.innerWrap.createChild({
                tag: 'img',
                src: Ext.BLANK_IMAGE_URL,
                cls: this.baseCls
            }, this.el);

            if(this.checked){
                this.setValue(true);
            }else{
                this.checked = this.el.dom.checked;
            }
            this.originalValue = this.checked;
        },

        // private
        afterRender : function(){
            Ext.form.Checkbox.superclass.afterRender.call(this);
            this.wrap[this.checked? 'addClass' : 'removeClass'](this.checkedCls);
        },

        // private
        onDestroy : function(){
            if(this.rendered){
                Ext.destroy(this.imageEl, this.labelEl, this.innerWrap, this.wrap);
            }
            Ext.form.Checkbox.superclass.onDestroy.call(this);
        },

        // private
        onFocus: function(e) {
            Ext.form.Checkbox.superclass.onFocus.call(this, e);
            this.el.addClass(this.focusCls);
        },

        // private
        onBlur: function(e) {
            Ext.form.Checkbox.superclass.onBlur.call(this, e);
            this.el.removeClass(this.focusCls);
        },

        // private
        onResize : function(){
            Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
            if(!this.boxLabel && !this.fieldLabel){
                this.el.alignTo(this.wrap, 'c-c');
            }
        },

        // private
        onKeyUp : function(e){
            if(e.getKey() == Ext.EventObject.SPACE){
                this.onClick(e);
            }
        },

        // private
        onClick : function(e){
            if (!this.disabled && !this.readOnly) {
                this.toggleValue();
            }
            e.stopEvent();
        },

        // private
        onEnable : function(){
            Ext.form.Checkbox.superclass.onEnable.call(this);
            this.initCheckEvents();
        },

        // private
        onDisable : function(){
            Ext.form.Checkbox.superclass.onDisable.call(this);
            this.innerWrap.removeAllListeners();
        },

        toggleValue : function(){
            this.setValue(!this.checked);
        },

        // private
        getResizeEl : function(){
            if(!this.resizeEl){
                this.resizeEl = Ext.isWebKit ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);
            }
            return this.resizeEl;
        },

        // private
        getPositionEl : function(){
            return this.wrap;
        },

        /**
         * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
         * @method
         */
        markInvalid : Ext.emptyFn,
        /**
         * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
         * @method
         */
        clearInvalid : Ext.emptyFn,

        // private
        initValue: function(){
            this.originalValue = this.getValue();
        },

        /**
         * Returns the checked state of the checkbox.
         * @return {Boolean} True if checked, else false
         */
        getValue : function(){
            if(this.rendered){
                return this.el.dom.checked;
            }
            return this.checked;
        },

        /**
         * Sets the checked state of the checkbox.
         * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
         */
        setValue : function(v) {
            var checked = this.checked;
            this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');

            if(this.rendered){
                this.el.dom.checked = this.checked;
                this.el.dom.defaultChecked = this.checked;
                this.wrap[this.checked? 'addClass' : 'removeClass'](this.checkedCls);
            }

            if(checked != this.checked){
                this.fireEvent("check", this, this.checked);
                if(this.handler){
                    this.handler.call(this.scope || this, this, this.checked);
                }
            }
        }

        /**
         * @cfg {Mixed} value
         * @hide
         */
    // holder
    /***
         * @cfg {String} disabledClass
         * @hide
         */
    // holder
    /***
         * @cfg {String} focusClass
         * @hide
         */
    });
    Ext.reg('checkbox', Ext.form.Checkbox);

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.