Checkbox.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:6k
源码类别:

中间件编程

开发平台:

JavaScript

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