Roo/form/Checkbox.js

/*
 * Based on:
 * Ext JS Library 1.1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 *
 * Originally Released Under LGPL - original licence link has changed is not relivant.
 *
 * Fork - LGPL
 * <script type="text/javascript">
 */
/**
 * @class Roo.form.Checkbox
 * @extends Roo.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
 */
Roo.form.Checkbox = function(config){
    Roo.form.Checkbox.superclass.constructor.call(this, config);
    this.addEvents({
        /**
         * @event check
         * Fires when the checkbox is checked or unchecked.
	     * @param {Roo.form.Checkbox} this This checkbox
	     * @param {Boolean} checked The new checked value
	     */
        check : true
    });
};

Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
    /**
     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
     */
    focusClass : undefined,
    /**
     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
     */
    fieldClass: "x-form-field",
    /**
     * @cfg {Boolean} checked True if the 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: 'hidden', autocomplete: "off"},
    /**
     * @cfg {String} boxLabel The text that appears beside the checkbox
     */
    boxLabel : "",
    /**
     * @cfg {String} inputValue The value that should go into the generated input element's value attribute
     */
    inputValue : '1',
    /**
     * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
     */
     valueOff: '0', // value when not checked..

    actionMode : 'viewEl',
    //
    // private
    itemCls : 'x-menu-check-item x-form-item',
    groupClass : 'x-menu-group-item',
    inputType : 'hidden',


    inSetChecked: false, // check that we are not calling self...

    inputElement: false, // real input element?
    basedOn: false, // ????

    isFormField: true, // not sure where this is needed!!!!

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

    initEvents : function(){
        Roo.form.Checkbox.superclass.initEvents.call(this);
        this.el.on("click", this.onClick,  this);
        this.el.on("change", this.onClick,  this);
    },


    getResizeEl : function(){
        return this.wrap;
    },

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

    // private
    onRender : function(ct, position){
        Roo.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"});
        this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
        var viewEl = this.wrap.createChild({
            tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
        this.viewEl = viewEl;
        this.wrap.on('click', this.onClick,  this);

        this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
        this.el.on('propertychange', this.setFromHidden,  this);  //ie



        if(this.boxLabel){
            this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
        //    viewEl.on('click', this.onClick,  this); 
        }
        //if(this.checked){
            this.setChecked(this.checked);
        //}else{
            //this.checked = this.el.dom;
        //}

    },

    // private
    initValue : Roo.emptyFn,

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

    },

	// private
    onClick : function(){
        if (this.disabled) {
            return;
        }
        this.setChecked(!this.checked);

        //if(this.el.dom.checked != this.checked){
        //    this.setValue(this.el.dom.checked);
       // }
    },

    /**
     * Sets the checked state of the checkbox.
     * On is always based on a string comparison between inputValue and the param.
     * @param {Boolean/String} value - the value to set 
     * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
     */
    setValue : function(v,suppressEvent){


        //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
        //if(this.el && this.el.dom){
        //    this.el.dom.checked = this.checked;
        //    this.el.dom.defaultChecked = this.checked;
        //}
        this.setChecked(String(v) === String(this.inputValue), suppressEvent);
        //this.fireEvent("check", this, this.checked);
    },
    // private..
    setChecked : function(state,suppressEvent)
    {
        if (this.inSetChecked) {
            this.checked = state;
            return;
        }


        if(this.wrap){
            this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
        }
        this.checked = state;
        if(suppressEvent !== true){
            this.fireEvent('check', this, state);
        }
        this.inSetChecked = true;
        this.el.dom.value = state ? this.inputValue : this.valueOff;
        this.inSetChecked = false;

    },
    // handle setting of hidden value by some other method!!?!?
    setFromHidden: function()
    {
        if(!this.el){
            return;
        }
        //console.log("SET FROM HIDDEN");
        //alert('setFrom hidden');
        this.setValue(this.el.dom.value);
    },

    onDestroy : function()
    {
        if(this.viewEl){
            Roo.get(this.viewEl).remove();
        }

        Roo.form.Checkbox.superclass.onDestroy.call(this);
    },

    setBoxLabel : function(str)
    {
        this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
    }

});