projects / roojs1 / blob
? search:


39096f0cb5f490d3e4c49b9b7e526b0009fc37a5
[roojs1] / docs / src / Roo_form_Checkbox.js.html
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">/*
2  * Based on:
3  * Ext JS Library 1.1.1
4  * Copyright(c) 2006-2007, Ext JS, LLC.
5  *
6  * Originally Released Under LGPL - original licence link has changed is not relivant.
7  *
8  * Fork - LGPL
9  * &lt;script type=&quot;text/javascript&quot;&gt;
10  */
11 /**
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.
15  * @constructor
16  * Creates a new Checkbox
17  * @param {Object} config Configuration options
18  */
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">/**
23          * @event check
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
27              */
28         </span><span class="jsdoc-var">check </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
29     </span><span class="jsdoc-syntax">});
30 };
31
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)
35      */
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 &quot;x-form-field&quot;)
39      */
40     </span><span class="jsdoc-var">fieldClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-field&quot;</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)
43      */
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: &quot;input&quot;, type: &quot;checkbox&quot;, autocomplete: &quot;off&quot;})
48      */
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">&quot;input&quot;</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">&quot;off&quot;</span><span class="jsdoc-syntax">},
50     </span><span class="jsdoc-comment">/**
51      * @cfg {String} boxLabel The text that appears beside the checkbox
52      */
53     </span><span class="jsdoc-var">boxLabel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</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
56      */
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.
60      */
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..
62
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">//
65     // private
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">,
69
70
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...
72
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">// ????
75
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!!!!
77
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">);
82         }
83     },
84
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">&quot;click&quot;</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">&quot;change&quot;</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">);
89     },
90
91
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">;
94     },
95
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">;
98     },
99
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;
106         }
107         */
108         //this.wrap = this.el.wrap({cls: &quot;x-form-check-wrap&quot;});
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">);
114
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
117
118
119
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;
128         //}
129
130     </span><span class="jsdoc-syntax">},
131
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">,
134
135     </span><span class="jsdoc-comment">/**
136      * Returns the checked state of the checkbox.
137      * @return {Boolean} True if checked, else false
138      */
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">;
142         }
143         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.valueOff</span><span class="jsdoc-syntax">;
144
145     },
146
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">;
151         }
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">);
153
154         </span><span class="jsdoc-comment">//if(this.el.dom.checked != this.checked){
155         //    this.setValue(this.el.dom.checked);
156        // }
157     </span><span class="jsdoc-syntax">},
158
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.
164      */
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">){
166
167
168         </span><span class="jsdoc-comment">//this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
169         //if(this.el &amp;&amp; this.el.dom){
170         //    this.el.dom.checked = this.checked;
171         //    this.el.dom.defaultChecked = this.checked;
172         //}
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(&quot;check&quot;, 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">)
178     {
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">;
182         }
183
184
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">);
187         }
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">);
191         }
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">;
195
196     },
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">()
199     {
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">;
202         }
203         </span><span class="jsdoc-comment">//console.log(&quot;SET FROM HIDDEN&quot;);
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">);
206     },
207
208     </span><span class="jsdoc-var">onDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
209     {
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">();
212         }
213
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">);
215     },
216
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">)
218     {
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">;
220     }
221
222 });</span></code></body></html>
RooJS - Version 1