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