546e2203144d7b16cd99df4062a53dc77db9372b
[roojs1] / docs / symbols / src / Roo_bootstrap_TriggerField.js.html
1 <html><head><title>../roojs1/Roo/bootstrap/TriggerField.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  * - LGPL
3  *
4  * trigger field - base class for combo..
5  * 
6  */
7  
8 /**
9  * @class Roo.bootstrap.TriggerField
10  * @extends Roo.bootstrap.Input
11  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
12  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
13  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
14  * for which you can provide a custom implementation.  For example:
15  * &lt;pre&gt;&lt;code&gt;
16 var trigger = new Roo.bootstrap.TriggerField();
17 trigger.onTriggerClick = myTriggerFn;
18 trigger.applyTo('my-field');
19 &lt;/code&gt;&lt;/pre&gt;
20  *
21  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
22  * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
23  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
24  * class 'x-form-trigger' by default and triggerClass will be &lt;b&gt;appended&lt;/b&gt; if specified.
25  * @cfg {String} caret (search|calendar) a fontawesome for the trigger icon see http://fortawesome.github.io/Font-Awesome/icons/
26
27  * @constructor
28  * Create a new TriggerField.
29  * @param {Object} config Configuration options (valid {@Roo.bootstrap.Input} config options will also be applied
30  * to the base TextField)
31  */
32 </span><span class="jsdoc-var">Roo.bootstrap.TriggerField </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">){
33     </span><span class="jsdoc-var">this.mimicing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
34     </span><span class="jsdoc-var">Roo.bootstrap.TriggerField.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">);
35 };
36
37 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.TriggerField</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Input</span><span class="jsdoc-syntax">,  {
38     </span><span class="jsdoc-comment">/**
39      * @cfg {String} triggerClass A CSS class to apply to the trigger
40      */
41      /**
42      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
43      */
44     </span><span class="jsdoc-var">hideTrigger</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
45
46     </span><span class="jsdoc-comment">/** @cfg {Boolean} grow @hide */
47     /** @cfg {Number} growMin @hide */
48     /** @cfg {Number} growMax @hide */
49
50     /**
51      * @hide 
52      * @method
53      */
54     </span><span class="jsdoc-var">autoSize</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
55     </span><span class="jsdoc-comment">// private
56     </span><span class="jsdoc-var">monitorTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
57     </span><span class="jsdoc-comment">// private
58     </span><span class="jsdoc-var">deferHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
59
60     
61     </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'wrap'</span><span class="jsdoc-syntax">,
62     
63     </span><span class="jsdoc-var">caret </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
64     
65     
66     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
67        
68         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.labelAlign </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.parentLabelAlign</span><span class="jsdoc-syntax">();
69         
70         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
71         
72         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
73             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-group' </span><span class="jsdoc-comment">//input-group
74         </span><span class="jsdoc-syntax">};
75         
76         
77         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">input </span><span class="jsdoc-syntax">=  {
78             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
79             </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
80             </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.inputType</span><span class="jsdoc-syntax">,
81             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-control'</span><span class="jsdoc-syntax">,
82             </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'new-password'</span><span class="jsdoc-syntax">,
83             </span><span class="jsdoc-var">placeholder </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.placeholder </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'' 
84             
85         </span><span class="jsdoc-syntax">};
86         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">) {
87             </span><span class="jsdoc-var">input.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
88         }
89         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.size</span><span class="jsdoc-syntax">) {
90             </span><span class="jsdoc-var">input.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' input-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.size</span><span class="jsdoc-syntax">;
91         }
92         
93         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">) {
94             </span><span class="jsdoc-var">input.disabled</span><span class="jsdoc-syntax">=</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
95         }
96         
97         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">inputblock </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">input</span><span class="jsdoc-syntax">;
98         
99         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasFeedback </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.allowBlank</span><span class="jsdoc-syntax">){
100             
101             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">feedback </span><span class="jsdoc-syntax">= {
102                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
103                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'glyphicon form-control-feedback'
104             </span><span class="jsdoc-syntax">};
105
106             </span><span class="jsdoc-var">inputblock </span><span class="jsdoc-syntax">= {
107                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'has-feedback'</span><span class="jsdoc-syntax">,
108                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">:  [
109                     </span><span class="jsdoc-var">input</span><span class="jsdoc-syntax">,
110                     </span><span class="jsdoc-var">feedback
111                 </span><span class="jsdoc-syntax">] 
112             };  
113         }
114         
115         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.before </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.after</span><span class="jsdoc-syntax">) {
116             
117             </span><span class="jsdoc-var">inputblock </span><span class="jsdoc-syntax">= {
118                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input-group'</span><span class="jsdoc-syntax">,
119                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">:  [] 
120             };
121             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.before</span><span class="jsdoc-syntax">) {
122                 </span><span class="jsdoc-var">inputblock.cn.push</span><span class="jsdoc-syntax">({
123                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
124                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input-group-addon'</span><span class="jsdoc-syntax">,
125                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.before
126                 </span><span class="jsdoc-syntax">});
127             }
128             
129             </span><span class="jsdoc-var">inputblock.cn.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">input</span><span class="jsdoc-syntax">);
130             
131             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasFeedback </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.allowBlank</span><span class="jsdoc-syntax">){
132                 </span><span class="jsdoc-var">inputblock.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' has-feedback'</span><span class="jsdoc-syntax">;
133                 </span><span class="jsdoc-var">inputblock.cn.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">feedback</span><span class="jsdoc-syntax">);
134             }
135             
136             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.after</span><span class="jsdoc-syntax">) {
137                 </span><span class="jsdoc-var">inputblock.cn.push</span><span class="jsdoc-syntax">({
138                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
139                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input-group-addon'</span><span class="jsdoc-syntax">,
140                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.after
141                 </span><span class="jsdoc-syntax">});
142             }
143             
144         };
145         
146         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= {
147             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
148             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
149                 {
150                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
151                     </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
152                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-hidden-field'
153                 </span><span class="jsdoc-syntax">},
154                 </span><span class="jsdoc-var">inputblock
155             </span><span class="jsdoc-syntax">]
156             
157         };
158         
159         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.multiple</span><span class="jsdoc-syntax">){
160             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'multiple'</span><span class="jsdoc-syntax">);
161             
162             </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= {
163                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
164                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
165                     {
166                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
167                         </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
168                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-hidden-field'
169                     </span><span class="jsdoc-syntax">},
170                     {
171                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
172                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'select2-choices'</span><span class="jsdoc-syntax">,
173                         </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">:[
174                             {
175                                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'li'</span><span class="jsdoc-syntax">,
176                                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'select2-search-field'</span><span class="jsdoc-syntax">,
177                                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
178
179                                     </span><span class="jsdoc-var">inputblock
180                                 </span><span class="jsdoc-syntax">]
181                             }
182                         ]
183                     }
184                 ]
185             }
186         };
187         
188         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">combobox </span><span class="jsdoc-syntax">= {
189             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'select2-container input-group'</span><span class="jsdoc-syntax">,
190             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
191                 </span><span class="jsdoc-var">box
192 </span><span class="jsdoc-comment">//                {
193 //                    tag: 'ul',
194 //                    cls: 'typeahead typeahead-long dropdown-menu',
195 //                    style: 'display:none'
196 //                }
197             </span><span class="jsdoc-syntax">]
198         };
199         
200         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.multiple </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.showToggleBtn</span><span class="jsdoc-syntax">){
201             
202             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">caret </span><span class="jsdoc-syntax">= {
203                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
204                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'caret'
205              </span><span class="jsdoc-syntax">};
206             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.caret </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
207                 </span><span class="jsdoc-var">caret </span><span class="jsdoc-syntax">= {
208                      </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
209                      </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fa fa-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.caret
210                 </span><span class="jsdoc-syntax">};
211                 
212             }
213             
214             </span><span class="jsdoc-var">combobox.cn.push</span><span class="jsdoc-syntax">({
215                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
216                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input-group-addon btn dropdown-toggle'</span><span class="jsdoc-syntax">,
217                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
218                     </span><span class="jsdoc-var">caret</span><span class="jsdoc-syntax">,
219                     {
220                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
221                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'combobox-clear'</span><span class="jsdoc-syntax">,
222                         </span><span class="jsdoc-var">cn  </span><span class="jsdoc-syntax">: [
223                             {
224                                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
225                                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-remove'
226                             </span><span class="jsdoc-syntax">}
227                         ]
228                     }
229                 ]
230
231             })
232         }
233         
234         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.multiple</span><span class="jsdoc-syntax">){
235             </span><span class="jsdoc-var">combobox.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' select2-container-multi'</span><span class="jsdoc-syntax">;
236         }
237         
238         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">===</span><span class="jsdoc-string">'left' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.fieldLabel.length</span><span class="jsdoc-syntax">) {
239             
240                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;left and has label&quot;</span><span class="jsdoc-syntax">);
241                 </span><span class="jsdoc-var">cfg.cn </span><span class="jsdoc-syntax">= [
242                     
243                     {
244                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'label'</span><span class="jsdoc-syntax">,
245                         </span><span class="jsdoc-string">'for' </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
246                         </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'control-label col-sm-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelWidth</span><span class="jsdoc-syntax">,
247                         </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.fieldLabel
248                         
249                     </span><span class="jsdoc-syntax">},
250                     {
251                         </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;col-sm-&quot; </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labelWidth</span><span class="jsdoc-syntax">), 
252                         </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
253                             </span><span class="jsdoc-var">combobox
254                         </span><span class="jsdoc-syntax">]
255                     }
256                     
257                 ];
258         } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.fieldLabel.length</span><span class="jsdoc-syntax">) {
259                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot; label&quot;</span><span class="jsdoc-syntax">);
260                  </span><span class="jsdoc-var">cfg.cn </span><span class="jsdoc-syntax">= [
261                    
262                     {
263                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'label'</span><span class="jsdoc-syntax">,
264                         </span><span class="jsdoc-comment">//cls : 'input-group-addon',
265                         </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.fieldLabel
266                         
267                     </span><span class="jsdoc-syntax">},
268                     
269                     </span><span class="jsdoc-var">combobox
270                     
271                 </span><span class="jsdoc-syntax">];
272
273         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
274             
275                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot; no label &amp;&amp; no align&quot;</span><span class="jsdoc-syntax">);
276                 </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">combobox
277                      
278                 
279         </span><span class="jsdoc-syntax">}
280          
281         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">settings</span><span class="jsdoc-syntax">=</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
282         [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'md'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'lg'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.map</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">){
283             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">settings</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">]) {
284                 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">settings</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">];
285             }
286         });
287         
288         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
289         
290     },
291     
292     
293     
294     </span><span class="jsdoc-comment">// private
295     </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
296 </span><span class="jsdoc-comment">//        Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments);
297 //        if(typeof w == 'number'){
298 //            var x = w - this.trigger.getWidth();
299 //            this.inputEl().setWidth(this.adjustWidth('input', x));
300 //            this.trigger.setStyle('left', x+'px');
301 //        }
302     </span><span class="jsdoc-syntax">},
303
304     </span><span class="jsdoc-comment">// private
305     </span><span class="jsdoc-var">adjustSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.BoxComponent.prototype.adjustSize</span><span class="jsdoc-syntax">,
306
307     </span><span class="jsdoc-comment">// private
308     </span><span class="jsdoc-var">getResizeEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
309         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">();
310     },
311
312     </span><span class="jsdoc-comment">// private
313     </span><span class="jsdoc-var">getPositionEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
314         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">();
315     },
316
317     </span><span class="jsdoc-comment">// private
318     </span><span class="jsdoc-var">alignErrorIcon </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
319         </span><span class="jsdoc-var">this.errorIcon.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-string">'tl-tr'</span><span class="jsdoc-syntax">, [2, 0]);
320     },
321
322     </span><span class="jsdoc-comment">// private
323     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
324         
325         </span><span class="jsdoc-var">this.createList</span><span class="jsdoc-syntax">();
326         
327         </span><span class="jsdoc-var">Roo.bootstrap.TriggerField.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
328         </span><span class="jsdoc-comment">//this.wrap = this.el.wrap({cls: &quot;x-form-field-wrap&quot;});
329         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.multiple </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.showToggleBtn</span><span class="jsdoc-syntax">){
330             </span><span class="jsdoc-var">this.trigger </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'span.dropdown-toggle'</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">();
331             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideTrigger</span><span class="jsdoc-syntax">){
332                 </span><span class="jsdoc-var">this.trigger.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
333             }
334             </span><span class="jsdoc-var">this.trigger.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.onTriggerClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
335         }
336         
337         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.multiple</span><span class="jsdoc-syntax">){
338             </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.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.onTriggerClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
339         }
340         
341         </span><span class="jsdoc-comment">//this.trigger.addClassOnOver('x-form-trigger-over');
342         //this.trigger.addClassOnClick('x-form-trigger-click');
343         
344         //if(!this.width){
345         //    this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
346         //}
347     </span><span class="jsdoc-syntax">},
348     
349     </span><span class="jsdoc-var">createList </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
350     {
351         </span><span class="jsdoc-var">this.list </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">({
352             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
353             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'typeahead typeahead-long dropdown-menu'</span><span class="jsdoc-syntax">,
354             </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display:none'
355         </span><span class="jsdoc-syntax">});
356         
357         </span><span class="jsdoc-var">this.list.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;;
358         
359     },
360
361     </span><span class="jsdoc-comment">// private
362     </span><span class="jsdoc-var">initTrigger </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
363        
364     },
365
366     </span><span class="jsdoc-comment">// private
367     </span><span class="jsdoc-var">onDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
368         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.trigger</span><span class="jsdoc-syntax">){
369             </span><span class="jsdoc-var">this.trigger.removeAllListeners</span><span class="jsdoc-syntax">();
370           </span><span class="jsdoc-comment">//  this.trigger.remove();
371         </span><span class="jsdoc-syntax">}
372         </span><span class="jsdoc-comment">//if(this.wrap){
373         //    this.wrap.remove();
374         //}
375         </span><span class="jsdoc-var">Roo.bootstrap.TriggerField.superclass.onDestroy.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
376     },
377
378     </span><span class="jsdoc-comment">// private
379     </span><span class="jsdoc-var">onFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
380         </span><span class="jsdoc-var">Roo.bootstrap.TriggerField.superclass.onFocus.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
381         </span><span class="jsdoc-comment">/*
382         if(!this.mimicing){
383             this.wrap.addClass('x-trigger-wrap-focus');
384             this.mimicing = true;
385             Roo.get(Roo.isIE ? document.body : document).on(&quot;mousedown&quot;, this.mimicBlur, this);
386             if(this.monitorTab){
387                 this.el.on(&quot;keydown&quot;, this.checkTab, this);
388             }
389         }
390         */
391     </span><span class="jsdoc-syntax">},
392
393     </span><span class="jsdoc-comment">// private
394     </span><span class="jsdoc-var">checkTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
395         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">e.TAB</span><span class="jsdoc-syntax">){
396             </span><span class="jsdoc-var">this.triggerBlur</span><span class="jsdoc-syntax">();
397         }
398     },
399
400     </span><span class="jsdoc-comment">// private
401     </span><span class="jsdoc-var">onBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
402         </span><span class="jsdoc-comment">// do nothing
403     </span><span class="jsdoc-syntax">},
404
405     </span><span class="jsdoc-comment">// private
406     </span><span class="jsdoc-var">mimicBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
407         </span><span class="jsdoc-comment">/*
408         if(!this.wrap.contains(t) &amp;&amp; this.validateBlur()){
409             this.triggerBlur();
410         }
411         */
412     </span><span class="jsdoc-syntax">},
413
414     </span><span class="jsdoc-comment">// private
415     </span><span class="jsdoc-var">triggerBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
416         </span><span class="jsdoc-var">this.mimicing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
417         </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.mimicBlur</span><span class="jsdoc-syntax">);
418         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorTab</span><span class="jsdoc-syntax">){
419             </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.checkTab</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
420         }
421         </span><span class="jsdoc-comment">//this.wrap.removeClass('x-trigger-wrap-focus');
422         </span><span class="jsdoc-var">Roo.bootstrap.TriggerField.superclass.onBlur.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
423     },
424
425     </span><span class="jsdoc-comment">// private
426     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
427     </span><span class="jsdoc-var">validateBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
428         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
429     },
430
431     </span><span class="jsdoc-comment">// private
432     </span><span class="jsdoc-var">onDisable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
433         </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
434         </span><span class="jsdoc-comment">//Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
435         //if(this.wrap){
436         //    this.wrap.addClass('x-item-disabled');
437         //}
438     </span><span class="jsdoc-syntax">},
439
440     </span><span class="jsdoc-comment">// private
441     </span><span class="jsdoc-var">onEnable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
442         </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
443         </span><span class="jsdoc-comment">//Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
444         //if(this.wrap){
445         //    this.el.removeClass('x-item-disabled');
446         //}
447     </span><span class="jsdoc-syntax">},
448
449     </span><span class="jsdoc-comment">// private
450     </span><span class="jsdoc-var">onShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
451         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ae </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">();
452         
453         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ae</span><span class="jsdoc-syntax">){
454             </span><span class="jsdoc-var">ae.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
455             </span><span class="jsdoc-var">ae.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'visible'</span><span class="jsdoc-syntax">;
456         }
457     },
458
459     </span><span class="jsdoc-comment">// private
460     
461     </span><span class="jsdoc-var">onHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
462         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ae </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getActionEl</span><span class="jsdoc-syntax">();
463         </span><span class="jsdoc-var">ae.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
464     },
465
466     </span><span class="jsdoc-comment">/**
467      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
468      * by an implementing function.
469      * @method
470      * @param {EventObject} e
471      */
472     </span><span class="jsdoc-var">onTriggerClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn
473 </span><span class="jsdoc-syntax">});
474  </span></code></body></html>