1 <html><head><title>Roo/form/Checkbox.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 * @class Roo.form.Checkbox
13 * @extends Roo.form.Field
14 * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
16 * Creates a new Checkbox
17 * @param {Object} config Configuration options
19 </span><span class="jsdoc-var">Roo.form.Checkbox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
20 </span><span class="jsdoc-var">Roo.form.Checkbox.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
21 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
22 </span><span class="jsdoc-comment">/**
24 * Fires when the checkbox is checked or unchecked.
25 * @param {Roo.form.Checkbox} this This checkbox
26 * @param {Boolean} checked The new checked value
28 </span><span class="jsdoc-var">check </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
29 </span><span class="jsdoc-syntax">});
32 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Checkbox</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.Field</span><span class="jsdoc-syntax">, {
33 </span><span class="jsdoc-comment">/**
34 * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
36 </span><span class="jsdoc-var">focusClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
37 </span><span class="jsdoc-comment">/**
38 * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
40 </span><span class="jsdoc-var">fieldClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-form-field"</span><span class="jsdoc-syntax">,
41 </span><span class="jsdoc-comment">/**
42 * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
44 </span><span class="jsdoc-var">checked</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
45 </span><span class="jsdoc-comment">/**
46 * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
47 * {tag: "input", type: "checkbox", autocomplete: "off"})
49 </span><span class="jsdoc-var">defaultAutoCreate </span><span class="jsdoc-syntax">: { </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"input"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"off"</span><span class="jsdoc-syntax">},
50 </span><span class="jsdoc-comment">/**
51 * @cfg {String} boxLabel The text that appears beside the checkbox
53 </span><span class="jsdoc-var">boxLabel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">,
54 </span><span class="jsdoc-comment">/**
55 * @cfg {String} inputValue The value that should go into the generated input element's value attribute
57 </span><span class="jsdoc-var">inputValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'1'</span><span class="jsdoc-syntax">,
58 </span><span class="jsdoc-comment">/**
59 * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
61 </span><span class="jsdoc-var">valueOff</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// value when not checked..
63 </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'viewEl'</span><span class="jsdoc-syntax">,
64 </span><span class="jsdoc-comment">//
66 </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-menu-check-item x-form-item'</span><span class="jsdoc-syntax">,
67 </span><span class="jsdoc-var">groupClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-menu-group-item'</span><span class="jsdoc-syntax">,
68 </span><span class="jsdoc-var">inputType </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
71 </span><span class="jsdoc-var">inSetChecked</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// check that we are not calling self...
73 </span><span class="jsdoc-var">inputElement</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// real input element?
74 </span><span class="jsdoc-var">basedOn</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// ????
76 </span><span class="jsdoc-var">isFormField</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// not sure where this is needed!!!!
78 </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
79 </span><span class="jsdoc-var">Roo.form.Checkbox.superclass.onResize.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
80 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.boxLabel</span><span class="jsdoc-syntax">){
81 </span><span class="jsdoc-var">this.el.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'c-c'</span><span class="jsdoc-syntax">);
85 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
86 </span><span class="jsdoc-var">Roo.form.Checkbox.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
87 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
88 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"change"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
92 </span><span class="jsdoc-var">getResizeEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
93 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">;
96 </span><span class="jsdoc-var">getPositionEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
97 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">;
100 </span><span class="jsdoc-comment">// private
101 </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
102 </span><span class="jsdoc-var">Roo.form.Checkbox.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
103 </span><span class="jsdoc-comment">/*
104 if(this.inputValue !== undefined){
105 this.el.dom.value = this.inputValue;
108 //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
109 </span><span class="jsdoc-var">this.wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.wrap</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-menu-check-item '</span><span class="jsdoc-syntax">});
110 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">viewEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.wrap.createChild</span><span class="jsdoc-syntax">({
111 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-menu-item-icon'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'margin: 0px;' </span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.BLANK_IMAGE_URL </span><span class="jsdoc-syntax">});
112 </span><span class="jsdoc-var">this.viewEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">viewEl</span><span class="jsdoc-syntax">;
113 </span><span class="jsdoc-var">this.wrap.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
115 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'DOMAttrModified'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.setFromHidden</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">//ff
116 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'propertychange'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.setFromHidden</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">//ie
120 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boxLabel</span><span class="jsdoc-syntax">){
121 </span><span class="jsdoc-var">this.wrap.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'label'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">htmlFor</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.el.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-form-cb-label'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.boxLabel</span><span class="jsdoc-syntax">});
122 </span><span class="jsdoc-comment">// viewEl.on('click', this.onClick, this);
123 </span><span class="jsdoc-syntax">}
124 </span><span class="jsdoc-comment">//if(this.checked){
125 </span><span class="jsdoc-var">this.setChecked</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.checked</span><span class="jsdoc-syntax">);
126 </span><span class="jsdoc-comment">//}else{
127 //this.checked = this.el.dom;
130 </span><span class="jsdoc-syntax">},
132 </span><span class="jsdoc-comment">// private
133 </span><span class="jsdoc-var">initValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
135 </span><span class="jsdoc-comment">/**
136 * Returns the checked state of the checkbox.
137 * @return {Boolean} True if checked, else false
139 </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
140 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
141 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.value</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputValue </span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.inputValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.valueOff</span><span class="jsdoc-syntax">;
143 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.valueOff</span><span class="jsdoc-syntax">;
147 </span><span class="jsdoc-comment">// private
148 </span><span class="jsdoc-var">onClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
149 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">) {
150 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
152 </span><span class="jsdoc-var">this.setChecked</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.checked</span><span class="jsdoc-syntax">);
154 </span><span class="jsdoc-comment">//if(this.el.dom.checked != this.checked){
155 // this.setValue(this.el.dom.checked);
157 </span><span class="jsdoc-syntax">},
159 </span><span class="jsdoc-comment">/**
160 * Sets the checked state of the checkbox.
161 * On is always based on a string comparison between inputValue and the param.
162 * @param {Boolean/String} value - the value to set
163 * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
165 </span><span class="jsdoc-var">setValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">suppressEvent</span><span class="jsdoc-syntax">){
168 </span><span class="jsdoc-comment">//this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
169 //if(this.el && this.el.dom){
170 // this.el.dom.checked = this.checked;
171 // this.el.dom.defaultChecked = this.checked;
173 </span><span class="jsdoc-var">this.setChecked</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputValue</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">suppressEvent</span><span class="jsdoc-syntax">);
174 </span><span class="jsdoc-comment">//this.fireEvent("check", this, this.checked);
175 </span><span class="jsdoc-syntax">},
176 </span><span class="jsdoc-comment">// private..
177 </span><span class="jsdoc-var">setChecked </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">suppressEvent</span><span class="jsdoc-syntax">)
179 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inSetChecked</span><span class="jsdoc-syntax">) {
180 </span><span class="jsdoc-var">this.checked </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">;
181 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
185 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">){
186 </span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'addClass' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'removeClass'</span><span class="jsdoc-syntax">](</span><span class="jsdoc-string">'x-menu-item-checked'</span><span class="jsdoc-syntax">);
188 </span><span class="jsdoc-var">this.checked </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">;
189 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">suppressEvent </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
190 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'check'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">);
192 </span><span class="jsdoc-var">this.inSetChecked </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
193 </span><span class="jsdoc-var">this.el.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">state </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.inputValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.valueOff</span><span class="jsdoc-syntax">;
194 </span><span class="jsdoc-var">this.inSetChecked </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
197 </span><span class="jsdoc-comment">// handle setting of hidden value by some other method!!?!?
198 </span><span class="jsdoc-var">setFromHidden</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
200 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
201 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
203 </span><span class="jsdoc-comment">//console.log("SET FROM HIDDEN");
204 //alert('setFrom hidden');
205 </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.value</span><span class="jsdoc-syntax">);
208 </span><span class="jsdoc-var">onDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
210 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.viewEl</span><span class="jsdoc-syntax">){
211 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.viewEl</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.remove</span><span class="jsdoc-syntax">();
214 </span><span class="jsdoc-var">Roo.form.Checkbox.superclass.onDestroy.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
217 </span><span class="jsdoc-var">setBoxLabel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">)
219 </span><span class="jsdoc-var">this.wrap.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.x-form-cb-label'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
222 });</span></code></body></html>