git.roojs.org Git - roojs1/blob - Roo/form/Checkbox.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11 /**
  12  * @class Roo.form.Checkbox
  13  * @extends Roo.form.Field
  14  * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
  15  * @constructor
  16  * Creates a new Checkbox
  17  * @param {Object} config Configuration options
  18  */
  19 Roo.form.Checkbox = function(config){
  20     Roo.form.Checkbox.superclass.constructor.call(this, config);
  21     this.addEvents({
  22         /**
  23          * @event check
  24          * Fires when the checkbox is checked or unchecked.
  25              * @param {Roo.form.Checkbox} this This checkbox
  26              * @param {Boolean} checked The new checked value
  27              */
  28         check : true
  29     });
  30 };
  31
  32 Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
  33     /**
  34      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
  35      */
  36     focusClass : undefined,
  37     /**
  38      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
  39      */
  40     fieldClass: "x-form-field",
  41     /**
  42      * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
  43      */
  44     checked: false,
  45     /**
  46      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
  47      * {tag: "input", type: "checkbox", autocomplete: "off"})
  48      */
  49     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
  50     /**
  51      * @cfg {String} boxLabel The text that appears beside the checkbox
  52      */
  53     boxLabel : "",
  54     /**
  55      * @cfg {String} inputValue The value that should go into the generated input element's value attribute
  56      */
  57     inputValue : '1',
  58     /**
  59      * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
  60      */
  61      valueOff: '0', // value when not checked..
  62
  63     actionMode : 'viewEl',
  64     //
  65     // private
  66     itemCls : 'x-menu-check-item x-form-item',
  67     groupClass : 'x-menu-group-item',
  68     inputType : 'hidden',
  69
  70
  71     inSetChecked: false, // check that we are not calling self...
  72
  73     inputElement: false, // real input element?
  74     basedOn: false, // ????
  75
  76     isFormField: true, // not sure where this is needed!!!!
  77
  78     onResize : function(){
  79         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
  80         if(!this.boxLabel){
  81             this.el.alignTo(this.wrap, 'c-c');
  82         }
  83     },
  84
  85     initEvents : function(){
  86         Roo.form.Checkbox.superclass.initEvents.call(this);
  87         this.el.on("click", this.onClick,  this);
  88         this.el.on("change", this.onClick,  this);
  89     },
  90
  91
  92     getResizeEl : function(){
  93         return this.wrap;
  94     },
  95
  96     getPositionEl : function(){
  97         return this.wrap;
  98     },
  99
 100     // private
 101     onRender : function(ct, position){
 102         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
 103         /*
 104         if(this.inputValue !== undefined){
 105             this.el.dom.value = this.inputValue;
 106         }
 107         */
 108         //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
 109         this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
 110         var viewEl = this.wrap.createChild({
 111             tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
 112         this.viewEl = viewEl;
 113         this.wrap.on('click', this.onClick,  this);
 114
 115         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
 116         this.el.on('propertychange', this.setFromHidden,  this);  //ie
 117
 118
 119
 120         if(this.boxLabel){
 121             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
 122         //    viewEl.on('click', this.onClick,  this);
 123         }
 124         //if(this.checked){
 125             this.setChecked(this.checked);
 126         //}else{
 127             //this.checked = this.el.dom;
 128         //}
 129
 130     },
 131
 132     // private
 133     initValue : Roo.emptyFn,
 134
 135     /**
 136      * Returns the checked state of the checkbox.
 137      * @return {Boolean} True if checked, else false
 138      */
 139     getValue : function(){
 140         if(this.el){
 141             return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
 142         }
 143         return this.valueOff;
 144
 145     },
 146
 147         // private
 148     onClick : function(){
 149         if (this.disabled) {
 150             return;
 151         }
 152         this.setChecked(!this.checked);
 153
 154         //if(this.el.dom.checked != this.checked){
 155         //    this.setValue(this.el.dom.checked);
 156        // }
 157     },
 158
 159     /**
 160      * Sets the checked state of the checkbox.
 161      * On is always based on a string comparison between inputValue and the param.
 162      * @param {Boolean/String} value - the value to set
 163      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
 164      */
 165     setValue : function(v,suppressEvent){
 166
 167
 168         //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
 169         //if(this.el && this.el.dom){
 170         //    this.el.dom.checked = this.checked;
 171         //    this.el.dom.defaultChecked = this.checked;
 172         //}
 173         this.setChecked(String(v) === String(this.inputValue), suppressEvent);
 174         //this.fireEvent("check", this, this.checked);
 175     },
 176     // private..
 177     setChecked : function(state,suppressEvent)
 178     {
 179         if (this.inSetChecked) {
 180             this.checked = state;
 181             return;
 182         }
 183
 184
 185         if(this.wrap){
 186             this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
 187         }
 188         this.checked = state;
 189         if(suppressEvent !== true){
 190             this.fireEvent('check', this, state);
 191         }
 192         this.inSetChecked = true;
 193
 194                 this.el.dom.value = state ? this.inputValue : this.valueOff;
 195
 196         this.inSetChecked = false;
 197
 198     },
 199     // handle setting of hidden value by some other method!!?!?
 200     setFromHidden: function()
 201     {
 202         if(!this.el){
 203             return;
 204         }
 205         //console.log("SET FROM HIDDEN");
 206         //alert('setFrom hidden');
 207         this.setValue(this.el.dom.value);
 208     },
 209
 210     onDestroy : function()
 211     {
 212         if(this.viewEl){
 213             Roo.get(this.viewEl).remove();
 214         }
 215
 216         Roo.form.Checkbox.superclass.onDestroy.call(this);
 217     },
 218
 219     setBoxLabel : function(str)
 220     {
 221         this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
 222     }
 223
 224 });