source/widgets/form/Checkbox.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.form.Checkbox\r
  11  * @extends Ext.form.Field\r
  12  * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.\r
  13  * @constructor\r
  14  * Creates a new Checkbox\r
  15  * @param {Object} config Configuration options\r
  16  */\r
  17 Ext.form.Checkbox = Ext.extend(Ext.form.Field,  {\r
  18     /**\r
  19      * @cfg {String} checkedCls The CSS class to use when the control is checked (defaults to 'x-form-check-checked').\r
  20      * Note that this class applies to both checkboxes and radio buttons and is added to the control's wrapper element.\r
  21      */\r
  22     checkedCls: 'x-form-check-checked',\r
  23     /**\r
  24      * @cfg {String} focusCls The CSS class to use when the control receives input focus (defaults to 'x-form-check-focus').\r
  25      * Note that this class applies to both checkboxes and radio buttons and is added to the control's wrapper element.\r
  26      */\r
  27     focusCls: 'x-form-check-focus',\r
  28     /**\r
  29      * @cfg {String} overCls The CSS class to use when the control is hovered over (defaults to 'x-form-check-over').\r
  30      * Note that this class applies to both checkboxes and radio buttons and is added to the control's wrapper element.\r
  31      */\r
  32     overCls: 'x-form-check-over',\r
  33     /**\r
  34      * @cfg {String} mouseDownCls The CSS class to use when the control is being actively clicked (defaults to 'x-form-check-down').\r
  35      * Note that this class applies to both checkboxes and radio buttons and is added to the control's wrapper element.\r
  36      */\r
  37     mouseDownCls: 'x-form-check-down',\r
  38     /**\r
  39      * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered,\r
  40      * not those which are built via applyTo (defaults to 0, which allows the browser to manage the tab index).\r
  41      */\r
  42     tabIndex: 0,\r
  43     /**\r
  44      * @cfg {Boolean} checked True if the checkbox should render already checked (defaults to false)\r
  45      */\r
  46     checked: false,\r
  47     /**\r
  48      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to\r
  49      * {tag: "input", type: "checkbox", autocomplete: "off"}).\r
  50      */\r
  51     defaultAutoCreate: {tag: 'input', type: 'checkbox', autocomplete: 'off'},\r
  52     /**\r
  53      * @cfg {String} boxLabel The text that appears beside the checkbox (defaults to '')\r
  54      */\r
  55     /**\r
  56      * @cfg {String} inputValue The value that should go into the generated input element's value attribute\r
  57      * (defaults to undefined, with no value attribute)\r
  58      */\r
  59     /**\r
  60      * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of \r
  61      * handling the check event). The handler is passed the following parameters:\r
  62      * <div class="mdetail-params"><ul>\r
  63      * <li><b>checkbox</b> : Ext.form.Checkbox<div class="sub-desc">The Checkbox being toggled.</div></li>\r
  64      * <li><b>checked</b> : Boolean<div class="sub-desc">The new checked state of the checkbox.</div></li>\r
  65      * </ul></div>\r
  66      */\r
  67     /**\r
  68      * @cfg {Object} scope An object to use as the scope ("this" reference) of the {@link #handler} function\r
  69      * (defaults to this Checkbox).\r
  70      */\r
  71 \r
  72 \r
  73     // private\r
  74     baseCls: 'x-form-check',\r
  75 \r
  76     // private\r
  77     initComponent : function(){\r
  78         Ext.form.Checkbox.superclass.initComponent.call(this);\r
  79         this.addEvents(\r
  80             /**\r
  81              * @event check\r
  82              * Fires when the checkbox is checked or unchecked.\r
  83              * @param {Ext.form.Checkbox} this This checkbox\r
  84              * @param {Boolean} checked The new checked value\r
  85              */\r
  86             'check'\r
  87         );\r
  88     },\r
  89 \r
  90     // private\r
  91     initEvents : function(){\r
  92         Ext.form.Checkbox.superclass.initEvents.call(this);\r
  93         this.initCheckEvents();\r
  94     },\r
  95 \r
  96     // private\r
  97     initCheckEvents : function(){\r
  98         this.innerWrap.removeAllListeners();\r
  99         this.innerWrap.addClassOnOver(this.overCls);\r
 100         this.innerWrap.addClassOnClick(this.mouseDownCls);\r
 101         this.innerWrap.on('click', this.onClick, this);\r
 102         this.innerWrap.on('keyup', this.onKeyUp, this);\r
 103     },\r
 104 \r
 105     // private\r
 106     onRender : function(ct, position){\r
 107         Ext.form.Checkbox.superclass.onRender.call(this, ct, position);\r
 108         if(this.inputValue !== undefined){\r
 109             this.el.dom.value = this.inputValue;\r
 110         }\r
 111         this.el.addClass('x-hidden');\r
 112 \r
 113         this.innerWrap = this.el.wrap({\r
 114             tabIndex: this.tabIndex,\r
 115             cls: this.baseCls+'-wrap-inner'\r
 116         });\r
 117         this.wrap = this.innerWrap.wrap({cls: this.baseCls+'-wrap'});\r
 118 \r
 119         if(this.boxLabel){\r
 120             this.labelEl = this.innerWrap.createChild({\r
 121                 tag: 'label',\r
 122                 htmlFor: this.el.id,\r
 123                 cls: 'x-form-cb-label',\r
 124                 html: this.boxLabel\r
 125             });\r
 126         }\r
 127 \r
 128         this.imageEl = this.innerWrap.createChild({\r
 129             tag: 'img',\r
 130             src: Ext.BLANK_IMAGE_URL,\r
 131             cls: this.baseCls\r
 132         }, this.el);\r
 133 \r
 134         if(this.checked){\r
 135             this.setValue(true);\r
 136         }else{\r
 137             this.checked = this.el.dom.checked;\r
 138         }\r
 139         this.originalValue = this.checked;\r
 140     },\r
 141     \r
 142     // private\r
 143     afterRender : function(){\r
 144         Ext.form.Checkbox.superclass.afterRender.call(this);\r
 145         this.wrap[this.checked? 'addClass' : 'removeClass'](this.checkedCls);\r
 146     },\r
 147 \r
 148     // private\r
 149     onDestroy : function(){\r
 150         if(this.rendered){\r
 151             Ext.destroy(this.imageEl, this.labelEl, this.innerWrap, this.wrap);\r
 152         }\r
 153         Ext.form.Checkbox.superclass.onDestroy.call(this);\r
 154     },\r
 155 \r
 156     // private\r
 157     onFocus: function(e) {\r
 158         Ext.form.Checkbox.superclass.onFocus.call(this, e);\r
 159         this.el.addClass(this.focusCls);\r
 160     },\r
 161 \r
 162     // private\r
 163     onBlur: function(e) {\r
 164         Ext.form.Checkbox.superclass.onBlur.call(this, e);\r
 165         this.el.removeClass(this.focusCls);\r
 166     },\r
 167 \r
 168     // private\r
 169     onResize : function(){\r
 170         Ext.form.Checkbox.superclass.onResize.apply(this, arguments);\r
 171         if(!this.boxLabel && !this.fieldLabel){\r
 172             this.el.alignTo(this.wrap, 'c-c');\r
 173         }\r
 174     },\r
 175 \r
 176     // private\r
 177     onKeyUp : function(e){\r
 178         if(e.getKey() == Ext.EventObject.SPACE){\r
 179             this.onClick(e);\r
 180         }\r
 181     },\r
 182 \r
 183     // private\r
 184     onClick : function(e){\r
 185         if (!this.disabled && !this.readOnly) {\r
 186             this.toggleValue();\r
 187         }\r
 188         e.stopEvent();\r
 189     },\r
 190 \r
 191     // private\r
 192     onEnable : function(){\r
 193         Ext.form.Checkbox.superclass.onEnable.call(this);\r
 194         this.initCheckEvents();\r
 195     },\r
 196 \r
 197     // private\r
 198     onDisable : function(){\r
 199         Ext.form.Checkbox.superclass.onDisable.call(this);\r
 200         this.innerWrap.removeAllListeners();\r
 201     },\r
 202 \r
 203     toggleValue : function(){\r
 204         this.setValue(!this.checked);\r
 205     },\r
 206 \r
 207     // private\r
 208     getResizeEl : function(){\r
 209         if(!this.resizeEl){\r
 210             this.resizeEl = Ext.isSafari ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);\r
 211         }\r
 212         return this.resizeEl;\r
 213     },\r
 214 \r
 215     // private\r
 216     getPositionEl : function(){\r
 217         return this.wrap;\r
 218     },\r
 219 \r
 220     // private\r
 221     getActionEl : function(){\r
 222         return this.wrap;\r
 223     },\r
 224 \r
 225     /**\r
 226      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
 227      * @method\r
 228      */\r
 229     markInvalid : Ext.emptyFn,\r
 230     /**\r
 231      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
 232      * @method\r
 233      */\r
 234     clearInvalid : Ext.emptyFn,\r
 235 \r
 236     // private\r
 237     initValue : Ext.emptyFn,\r
 238 \r
 239     /**\r
 240      * Returns the checked state of the checkbox.\r
 241      * @return {Boolean} True if checked, else false\r
 242      */\r
 243     getValue : function(){\r
 244         if(this.rendered){\r
 245             return this.el.dom.checked;\r
 246         }\r
 247         return this.checked;\r
 248     },\r
 249 \r
 250     /**\r
 251      * Sets the checked state of the checkbox.\r
 252      * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.\r
 253      */\r
 254     setValue : function(v) {\r
 255         var checked = this.checked;\r
 256         this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');\r
 257         \r
 258         if(this.rendered){\r
 259             this.el.dom.checked = this.checked;\r
 260             this.el.dom.defaultChecked = this.checked;\r
 261             this.wrap[this.checked? 'addClass' : 'removeClass'](this.checkedCls);\r
 262         }\r
 263 \r
 264         if(checked != this.checked){\r
 265             this.fireEvent("check", this, this.checked);\r
 266             if(this.handler){\r
 267                 this.handler.call(this.scope || this, this, this.checked);\r
 268             }\r
 269         }\r
 270     }\r
 271 \r
 272     /**\r
 273      * @cfg {Mixed} value\r
 274      * @hide\r
 275      */\r
 276     /**\r
 277      * @cfg {String} disabledClass\r
 278      * @hide\r
 279      */\r
 280     /**\r
 281      * @cfg {String} focusClass\r
 282      * @hide\r
 283      */\r
 284 });\r
 285 Ext.reg('checkbox', Ext.form.Checkbox);\r