projects / roojs1 / blob
? search:


9a35ff5b571d97f16330c6b3e72576a2d8334239
[roojs1] / docs / src / Roo_form_TriggerField.js.html
1 <html><head><title>/home/edward/gitlive/roojs1/Roo/form/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  * 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 /**
13  * @class Roo.form.TriggerField
14  * @extends Roo.form.TextField
15  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
16  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
17  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
18  * for which you can provide a custom implementation.  For example:
19  * &lt;pre&gt;&lt;code&gt;
20 var trigger = new Roo.form.TriggerField();
21 trigger.onTriggerClick = myTriggerFn;
22 trigger.applyTo('my-field');
23 &lt;/code&gt;&lt;/pre&gt;
24  *
25  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
26  * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
27  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
28  * class 'x-form-trigger' by default and triggerClass will be &lt;b&gt;appended&lt;/b&gt; if specified.
29  * @constructor
30  * Create a new TriggerField.
31  * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
32  * to the base TextField)
33  */
34 </span><span class="jsdoc-var">Roo.form.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">){
35     </span><span class="jsdoc-var">this.mimicing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
36     </span><span class="jsdoc-var">Roo.form.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">);
37 };
38
39 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.TriggerField</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.TextField</span><span class="jsdoc-syntax">,  {
40     </span><span class="jsdoc-comment">/**
41      * @cfg {String} triggerClass A CSS class to apply to the trigger
42      */
43     /**
44      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
45      * {tag: &quot;input&quot;, type: &quot;text&quot;, size: &quot;16&quot;, autocomplete: &quot;off&quot;})
46      */
47     </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">&quot;text&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;16&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;new-password&quot;</span><span class="jsdoc-syntax">},
48     </span><span class="jsdoc-comment">/**
49      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
50      */
51     </span><span class="jsdoc-var">hideTrigger</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
52
53     </span><span class="jsdoc-comment">/** @cfg {Boolean} grow @hide */
54     /** @cfg {Number} growMin @hide */
55     /** @cfg {Number} growMax @hide */
56
57     /**
58      * @hide 
59      * @method
60      */
61     </span><span class="jsdoc-var">autoSize</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
62     </span><span class="jsdoc-comment">// private
63     </span><span class="jsdoc-var">monitorTab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
64     </span><span class="jsdoc-comment">// private
65     </span><span class="jsdoc-var">deferHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
66
67
68     </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'wrap'</span><span class="jsdoc-syntax">,
69     </span><span class="jsdoc-comment">// private
70     </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">){
71         </span><span class="jsdoc-var">Roo.form.TriggerField.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">);
72         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'number'</span><span class="jsdoc-syntax">){
73             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.trigger.getWidth</span><span class="jsdoc-syntax">();
74             </span><span class="jsdoc-var">this.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">));
75             </span><span class="jsdoc-var">this.trigger.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">);
76         }
77     },
78
79     </span><span class="jsdoc-comment">// private
80     </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">,
81
82     </span><span class="jsdoc-comment">// private
83     </span><span class="jsdoc-var">getResizeEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
84         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">;
85     },
86
87     </span><span class="jsdoc-comment">// private
88     </span><span class="jsdoc-var">getPositionEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
89         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">;
90     },
91
92     </span><span class="jsdoc-comment">// private
93     </span><span class="jsdoc-var">alignErrorIcon </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
94         </span><span class="jsdoc-var">this.errorIcon.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tl-tr'</span><span class="jsdoc-syntax">, [2, 0]);
95     },
96
97     </span><span class="jsdoc-comment">// private
98     </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">){
99         </span><span class="jsdoc-var">Roo.form.TriggerField.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">);
100         </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">&quot;x-form-field-wrap&quot;</span><span class="jsdoc-syntax">});
101         </span><span class="jsdoc-var">this.trigger </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.wrap.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerConfig </span><span class="jsdoc-syntax">||
102                 {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;img&quot;</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">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-trigger &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.triggerClass</span><span class="jsdoc-syntax">});
103         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideTrigger</span><span class="jsdoc-syntax">){
104             </span><span class="jsdoc-var">this.trigger.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
105         }
106         </span><span class="jsdoc-var">this.initTrigger</span><span class="jsdoc-syntax">();
107         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">){
108             </span><span class="jsdoc-var">this.wrap.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">()+</span><span class="jsdoc-var">this.trigger.getWidth</span><span class="jsdoc-syntax">());
109         }
110     },
111
112     </span><span class="jsdoc-comment">// private
113     </span><span class="jsdoc-var">initTrigger </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
114         </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">});
115         </span><span class="jsdoc-var">this.trigger.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-form-trigger-over'</span><span class="jsdoc-syntax">);
116         </span><span class="jsdoc-var">this.trigger.addClassOnClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-form-trigger-click'</span><span class="jsdoc-syntax">);
117     },
118
119     </span><span class="jsdoc-comment">// private
120     </span><span class="jsdoc-var">onDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
121         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.trigger</span><span class="jsdoc-syntax">){
122             </span><span class="jsdoc-var">this.trigger.removeAllListeners</span><span class="jsdoc-syntax">();
123             </span><span class="jsdoc-var">this.trigger.remove</span><span class="jsdoc-syntax">();
124         }
125         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">){
126             </span><span class="jsdoc-var">this.wrap.remove</span><span class="jsdoc-syntax">();
127         }
128         </span><span class="jsdoc-var">Roo.form.TriggerField.superclass.onDestroy.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
129     },
130
131     </span><span class="jsdoc-comment">// private
132     </span><span class="jsdoc-var">onFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
133         </span><span class="jsdoc-var">Roo.form.TriggerField.superclass.onFocus.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
134         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.mimicing</span><span class="jsdoc-syntax">){
135             </span><span class="jsdoc-var">this.wrap.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-trigger-wrap-focus'</span><span class="jsdoc-syntax">);
136             </span><span class="jsdoc-var">this.mimicing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
137             </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">.on</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">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
138             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorTab</span><span class="jsdoc-syntax">){
139                 </span><span class="jsdoc-var">this.el.on</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">);
140             }
141         }
142     },
143
144     </span><span class="jsdoc-comment">// private
145     </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">){
146         </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">){
147             </span><span class="jsdoc-var">this.triggerBlur</span><span class="jsdoc-syntax">();
148         }
149     },
150
151     </span><span class="jsdoc-comment">// private
152     </span><span class="jsdoc-var">onBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
153         </span><span class="jsdoc-comment">// do nothing
154     </span><span class="jsdoc-syntax">},
155
156     </span><span class="jsdoc-comment">// private
157     </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">){
158         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.wrap.contains</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">this.validateBlur</span><span class="jsdoc-syntax">()){
159             </span><span class="jsdoc-var">this.triggerBlur</span><span class="jsdoc-syntax">();
160         }
161     },
162
163     </span><span class="jsdoc-comment">// private
164     </span><span class="jsdoc-var">triggerBlur </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
165         </span><span class="jsdoc-var">this.mimicing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
166         </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">);
167         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorTab</span><span class="jsdoc-syntax">){
168             </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">);
169         }
170         </span><span class="jsdoc-var">this.wrap.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-trigger-wrap-focus'</span><span class="jsdoc-syntax">);
171         </span><span class="jsdoc-var">Roo.form.TriggerField.superclass.onBlur.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
172     },
173
174     </span><span class="jsdoc-comment">// private
175     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
176     </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">){
177         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
178     },
179
180     </span><span class="jsdoc-comment">// private
181     </span><span class="jsdoc-var">onDisable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
182         </span><span class="jsdoc-var">Roo.form.TriggerField.superclass.onDisable.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
183         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">){
184             </span><span class="jsdoc-var">this.wrap.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-item-disabled'</span><span class="jsdoc-syntax">);
185         }
186     },
187
188     </span><span class="jsdoc-comment">// private
189     </span><span class="jsdoc-var">onEnable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
190         </span><span class="jsdoc-var">Roo.form.TriggerField.superclass.onEnable.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
191         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap</span><span class="jsdoc-syntax">){
192             </span><span class="jsdoc-var">this.wrap.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-item-disabled'</span><span class="jsdoc-syntax">);
193         }
194     },
195
196     </span><span class="jsdoc-comment">// private
197     </span><span class="jsdoc-var">onShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
198         </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">();
199
200         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ae</span><span class="jsdoc-syntax">){
201             </span><span class="jsdoc-var">ae.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
202             </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">;
203         }
204     },
205
206     </span><span class="jsdoc-comment">// private
207
208     </span><span class="jsdoc-var">onHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
209         </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">();
210         </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">;
211     },
212
213     </span><span class="jsdoc-comment">/**
214      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
215      * by an implementing function.
216      * @method
217      * @param {EventObject} e
218      */
219     </span><span class="jsdoc-var">onTriggerClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn
220 </span><span class="jsdoc-syntax">});
221
222 </span><span class="jsdoc-comment">// TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
223 // to be extended by an implementing class.  For an example of implementing this class, see the custom
224 // SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
225 </span><span class="jsdoc-var">Roo.form.TwinTriggerField </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.TriggerField</span><span class="jsdoc-syntax">, {
226     </span><span class="jsdoc-var">initComponent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
227         </span><span class="jsdoc-var">Roo.form.TwinTriggerField.superclass.initComponent.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
228
229         </span><span class="jsdoc-var">this.triggerConfig </span><span class="jsdoc-syntax">= {
230             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-form-twin-triggers'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">:[
231             {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;img&quot;</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">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-trigger &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.trigger1Class</span><span class="jsdoc-syntax">},
232             {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;img&quot;</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">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-trigger &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.trigger2Class</span><span class="jsdoc-syntax">}
233         ]};
234     },
235
236     </span><span class="jsdoc-var">getTrigger </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">){
237         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.triggers</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">];
238     },
239
240     </span><span class="jsdoc-var">initTrigger </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
241         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.trigger.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.x-form-trigger'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
242         </span><span class="jsdoc-var">this.wrap.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'overflow'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">);
243         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">triggerField </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
244         </span><span class="jsdoc-var">ts.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">all</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">){
245             </span><span class="jsdoc-var">t.hide </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
246                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">triggerField.wrap.getWidth</span><span class="jsdoc-syntax">();
247                 </span><span class="jsdoc-var">this.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
248                 </span><span class="jsdoc-var">triggerField.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">triggerField.trigger.getWidth</span><span class="jsdoc-syntax">());
249             };
250             </span><span class="jsdoc-var">t.show </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
251                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">triggerField.wrap.getWidth</span><span class="jsdoc-syntax">();
252                 </span><span class="jsdoc-var">this.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
253                 </span><span class="jsdoc-var">triggerField.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">triggerField.trigger.getWidth</span><span class="jsdoc-syntax">());
254             };
255             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">triggerIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'Trigger'</span><span class="jsdoc-syntax">+(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">+1);
256
257             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'hide'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">triggerIndex</span><span class="jsdoc-syntax">]){
258                 </span><span class="jsdoc-var">t.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
259             }
260             </span><span class="jsdoc-var">t.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</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'on'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">triggerIndex</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'Click'</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">});
261             </span><span class="jsdoc-var">t.addClassOnOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-form-trigger-over'</span><span class="jsdoc-syntax">);
262             </span><span class="jsdoc-var">t.addClassOnClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-form-trigger-click'</span><span class="jsdoc-syntax">);
263         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
264         </span><span class="jsdoc-var">this.triggers </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ts.elements</span><span class="jsdoc-syntax">;
265     },
266
267     </span><span class="jsdoc-var">onTrigger1Click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
268     </span><span class="jsdoc-var">onTrigger2Click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.emptyFn
269 </span><span class="jsdoc-syntax">});</span></code></body></html>
RooJS - Version 1