2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\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
14 * Creates a new Checkbox
\r
15 * @param {Object} config Configuration options
\r
17 Ext.form.Checkbox = Ext.extend(Ext.form.Field, {
\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
22 checkedCls: 'x-form-check-checked',
\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
27 focusCls: 'x-form-check-focus',
\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
32 overCls: 'x-form-check-over',
\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
37 mouseDownCls: 'x-form-check-down',
\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
44 * @cfg {Boolean} checked True if the checkbox should render already checked (defaults to false)
\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
51 defaultAutoCreate: {tag: 'input', type: 'checkbox', autocomplete: 'off'},
\r
53 * @cfg {String} boxLabel The text that appears beside the checkbox (defaults to '')
\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
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
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
74 baseCls: 'x-form-check',
\r
77 initComponent : function(){
\r
78 Ext.form.Checkbox.superclass.initComponent.call(this);
\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
91 initEvents : function(){
\r
92 Ext.form.Checkbox.superclass.initEvents.call(this);
\r
93 this.initCheckEvents();
\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
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
111 this.el.addClass('x-hidden');
\r
113 this.innerWrap = this.el.wrap({
\r
114 tabIndex: this.tabIndex,
\r
115 cls: this.baseCls+'-wrap-inner'
\r
117 this.wrap = this.innerWrap.wrap({cls: this.baseCls+'-wrap'});
\r
120 this.labelEl = this.innerWrap.createChild({
\r
122 htmlFor: this.el.id,
\r
123 cls: 'x-form-cb-label',
\r
124 html: this.boxLabel
\r
128 this.imageEl = this.innerWrap.createChild({
\r
130 src: Ext.BLANK_IMAGE_URL,
\r
135 this.setValue(true);
\r
137 this.checked = this.el.dom.checked;
\r
139 this.originalValue = this.checked;
\r
143 afterRender : function(){
\r
144 Ext.form.Checkbox.superclass.afterRender.call(this);
\r
145 this.wrap[this.checked? 'addClass' : 'removeClass'](this.checkedCls);
\r
149 onDestroy : function(){
\r
151 Ext.destroy(this.imageEl, this.labelEl, this.innerWrap, this.wrap);
\r
153 Ext.form.Checkbox.superclass.onDestroy.call(this);
\r
157 onFocus: function(e) {
\r
158 Ext.form.Checkbox.superclass.onFocus.call(this, e);
\r
159 this.el.addClass(this.focusCls);
\r
163 onBlur: function(e) {
\r
164 Ext.form.Checkbox.superclass.onBlur.call(this, e);
\r
165 this.el.removeClass(this.focusCls);
\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
177 onKeyUp : function(e){
\r
178 if(e.getKey() == Ext.EventObject.SPACE){
\r
184 onClick : function(e){
\r
185 if (!this.disabled && !this.readOnly) {
\r
186 this.toggleValue();
\r
192 onEnable : function(){
\r
193 Ext.form.Checkbox.superclass.onEnable.call(this);
\r
194 this.initCheckEvents();
\r
198 onDisable : function(){
\r
199 Ext.form.Checkbox.superclass.onDisable.call(this);
\r
200 this.innerWrap.removeAllListeners();
\r
203 toggleValue : function(){
\r
204 this.setValue(!this.checked);
\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
212 return this.resizeEl;
\r
216 getPositionEl : function(){
\r
221 getActionEl : function(){
\r
226 * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
\r
229 markInvalid : Ext.emptyFn,
\r
231 * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
\r
234 clearInvalid : Ext.emptyFn,
\r
237 initValue : Ext.emptyFn,
\r
240 * Returns the checked state of the checkbox.
\r
241 * @return {Boolean} True if checked, else false
\r
243 getValue : function(){
\r
245 return this.el.dom.checked;
\r
247 return this.checked;
\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
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
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
264 if(checked != this.checked){
\r
265 this.fireEvent("check", this, this.checked);
\r
267 this.handler.call(this.scope || this, this, this.checked);
\r
273 * @cfg {Mixed} value
\r
277 * @cfg {String} disabledClass
\r
281 * @cfg {String} focusClass
\r
285 Ext.reg('checkbox', Ext.form.Checkbox);
\r