docs/source/Checkbox.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.form.Checkbox"></div>/**
  15  * @class Ext.form.Checkbox
  16  * @extends Ext.form.Field
  17  * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
  18  * @constructor
  19  * Creates a new Checkbox
  20  * @param {Object} config Configuration options
  21  * @xtype checkbox
  22  */
  23 Ext.form.Checkbox = Ext.extend(Ext.form.Field,  {
  24     <div id="cfg-Ext.form.Checkbox-focusClass"></div>/**
  25      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
  26      */
  27     focusClass : undefined,
  28     <div id="cfg-Ext.form.Checkbox-fieldClass"></div>/**
  29      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to 'x-form-field')
  30      */
  31     fieldClass : 'x-form-field',
  32     <div id="cfg-Ext.form.Checkbox-checked"></div>/**
  33      * @cfg {Boolean} checked <tt>true</tt> if the checkbox should render initially checked (defaults to <tt>false</tt>)
  34      */
  35     checked : false,
  36     <div id="cfg-Ext.form.Checkbox-autoCreate"></div>/**
  37      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
  38      * {tag: 'input', type: 'checkbox', autocomplete: 'off'})
  39      */
  40     defaultAutoCreate : { tag: 'input', type: 'checkbox', autocomplete: 'off'},
  41     <div id="cfg-Ext.form.Checkbox-boxLabel"></div>/**
  42      * @cfg {String} boxLabel The text that appears beside the checkbox
  43      */
  44     <div id="cfg-Ext.form.Checkbox-inputValue"></div>/**
  45      * @cfg {String} inputValue The value that should go into the generated input element's value attribute
  46      */
  47     <div id="cfg-Ext.form.Checkbox-handler"></div>/**
  48      * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of
  49      * handling the check event). The handler is passed the following parameters:
  50      * <div class="mdetail-params"><ul>
  51      * <li><b>checkbox</b> : Ext.form.Checkbox<div class="sub-desc">The Checkbox being toggled.</div></li>
  52      * <li><b>checked</b> : Boolean<div class="sub-desc">The new checked state of the checkbox.</div></li>
  53      * </ul></div>
  54      */
  55     <div id="cfg-Ext.form.Checkbox-scope"></div>/**
  56      * @cfg {Object} scope An object to use as the scope ('this' reference) of the {@link #handler} function
  57      * (defaults to this Checkbox).
  58      */
  59
  60     // private
  61     actionMode : 'wrap',
  62
  63         // private
  64     initComponent : function(){
  65         Ext.form.Checkbox.superclass.initComponent.call(this);
  66         this.addEvents(
  67             <div id="event-Ext.form.Checkbox-check"></div>/**
  68              * @event check
  69              * Fires when the checkbox is checked or unchecked.
  70              * @param {Ext.form.Checkbox} this This checkbox
  71              * @param {Boolean} checked The new checked value
  72              */
  73             'check'
  74         );
  75     },
  76
  77     // private
  78     onResize : function(){
  79         Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
  80         if(!this.boxLabel && !this.fieldLabel){
  81             this.el.alignTo(this.wrap, 'c-c');
  82         }
  83     },
  84
  85     // private
  86     initEvents : function(){
  87         Ext.form.Checkbox.superclass.initEvents.call(this);
  88         this.mon(this.el, {
  89             scope: this,
  90             click: this.onClick,
  91             change: this.onClick
  92         });
  93     },
  94
  95     <div id="method-Ext.form.Checkbox-markInvalid"></div>/**
  96      * @hide
  97      * Overridden and disabled. The editor element does not support standard valid/invalid marking.
  98      * @method
  99      */
 100     markInvalid : Ext.emptyFn,
 101     <div id="method-Ext.form.Checkbox-clearInvalid"></div>/**
 102      * @hide
 103      * Overridden and disabled. The editor element does not support standard valid/invalid marking.
 104      * @method
 105      */
 106     clearInvalid : Ext.emptyFn,
 107
 108     // private
 109     onRender : function(ct, position){
 110         Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
 111         if(this.inputValue !== undefined){
 112             this.el.dom.value = this.inputValue;
 113         }
 114         this.wrap = this.el.wrap({cls: 'x-form-check-wrap'});
 115         if(this.boxLabel){
 116             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
 117         }
 118         if(this.checked){
 119             this.setValue(true);
 120         }else{
 121             this.checked = this.el.dom.checked;
 122         }
 123         // Need to repaint for IE, otherwise positioning is broken
 124         if(Ext.isIE){
 125             this.wrap.repaint();
 126         }
 127         this.resizeEl = this.positionEl = this.wrap;
 128     },
 129
 130     // private
 131     onDestroy : function(){
 132         Ext.destroy(this.wrap);
 133         Ext.form.Checkbox.superclass.onDestroy.call(this);
 134     },
 135
 136     // private
 137     initValue : function() {
 138         this.originalValue = this.getValue();
 139     },
 140
 141     <div id="method-Ext.form.Checkbox-getValue"></div>/**
 142      * Returns the checked state of the checkbox.
 143      * @return {Boolean} True if checked, else false
 144      */
 145     getValue : function(){
 146         if(this.rendered){
 147             return this.el.dom.checked;
 148         }
 149         return this.checked;
 150     },
 151
 152         // private
 153     onClick : function(){
 154         if(this.el.dom.checked != this.checked){
 155             this.setValue(this.el.dom.checked);
 156         }
 157     },
 158
 159     <div id="method-Ext.form.Checkbox-setValue"></div>/**
 160      * Sets the checked state of the checkbox, fires the 'check' event, and calls a
 161      * <code>{@link #handler}</code> (if configured).
 162      * @param {Boolean/String} checked The following values will check the checkbox:
 163      * <code>true, 'true', '1', or 'on'</code>. Any other value will uncheck the checkbox.
 164      * @return {Ext.form.Field} this
 165      */
 166     setValue : function(v){
 167         var checked = this.checked ;
 168         this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
 169         if(this.rendered){
 170             this.el.dom.checked = this.checked;
 171             this.el.dom.defaultChecked = this.checked;
 172         }
 173         if(checked != this.checked){
 174             this.fireEvent('check', this, this.checked);
 175             if(this.handler){
 176                 this.handler.call(this.scope || this, this, this.checked);
 177             }
 178         }
 179         return this;
 180     }
 181 });
 182 Ext.reg('checkbox', Ext.form.Checkbox);
 183 </pre>
 184 </body>
 185 </html>