[76] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.4.0 |
---|
| 3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
| 4 | * licensing@sencha.com |
---|
| 5 | * http://www.sencha.com/license |
---|
| 6 | */ |
---|
| 7 | /** |
---|
| 8 | * @class Ext.form.ComboBox |
---|
| 9 | * @extends Ext.form.TriggerField |
---|
| 10 | * <p>A combobox control with support for autocomplete, remote-loading, paging and many other features.</p> |
---|
| 11 | * <p>A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is |
---|
| 12 | * that to submit the {@link #valueField}, you must specify a {@link #hiddenName} to create a hidden input |
---|
| 13 | * field to hold the value of the valueField. The <i>{@link #displayField}</i> is shown in the text field |
---|
| 14 | * which is named according to the {@link #name}.</p> |
---|
| 15 | * <p><b><u>Events</u></b></p> |
---|
| 16 | * <p>To do something when something in ComboBox is selected, configure the select event:<pre><code> |
---|
| 17 | var cb = new Ext.form.ComboBox({ |
---|
| 18 | // all of your config options |
---|
| 19 | listeners:{ |
---|
| 20 | scope: yourScope, |
---|
| 21 | 'select': yourFunction |
---|
| 22 | } |
---|
| 23 | }); |
---|
| 24 | |
---|
| 25 | // Alternatively, you can assign events after the object is created: |
---|
| 26 | var cb = new Ext.form.ComboBox(yourOptions); |
---|
| 27 | cb.on('select', yourFunction, yourScope); |
---|
| 28 | * </code></pre></p> |
---|
| 29 | * |
---|
| 30 | * <p><b><u>ComboBox in Grid</u></b></p> |
---|
| 31 | * <p>If using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a {@link Ext.grid.Column#renderer renderer} |
---|
| 32 | * will be needed to show the displayField when the editor is not active. Set up the renderer manually, or implement |
---|
| 33 | * a reusable render, for example:<pre><code> |
---|
| 34 | // create reusable renderer |
---|
| 35 | Ext.util.Format.comboRenderer = function(combo){ |
---|
| 36 | return function(value){ |
---|
| 37 | var record = combo.findRecord(combo.{@link #valueField}, value); |
---|
| 38 | return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText}; |
---|
| 39 | } |
---|
| 40 | } |
---|
| 41 | |
---|
| 42 | // create the combo instance |
---|
| 43 | var combo = new Ext.form.ComboBox({ |
---|
| 44 | {@link #typeAhead}: true, |
---|
| 45 | {@link #triggerAction}: 'all', |
---|
| 46 | {@link #lazyRender}:true, |
---|
| 47 | {@link #mode}: 'local', |
---|
| 48 | {@link #store}: new Ext.data.ArrayStore({ |
---|
| 49 | id: 0, |
---|
| 50 | fields: [ |
---|
| 51 | 'myId', |
---|
| 52 | 'displayText' |
---|
| 53 | ], |
---|
| 54 | data: [[1, 'item1'], [2, 'item2']] |
---|
| 55 | }), |
---|
| 56 | {@link #valueField}: 'myId', |
---|
| 57 | {@link #displayField}: 'displayText' |
---|
| 58 | }); |
---|
| 59 | |
---|
| 60 | // snippet of column model used within grid |
---|
| 61 | var cm = new Ext.grid.ColumnModel([{ |
---|
| 62 | ... |
---|
| 63 | },{ |
---|
| 64 | header: "Some Header", |
---|
| 65 | dataIndex: 'whatever', |
---|
| 66 | width: 130, |
---|
| 67 | editor: combo, // specify reference to combo instance |
---|
| 68 | renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer |
---|
| 69 | }, |
---|
| 70 | ... |
---|
| 71 | ]); |
---|
| 72 | * </code></pre></p> |
---|
| 73 | * |
---|
| 74 | * <p><b><u>Filtering</u></b></p> |
---|
| 75 | * <p>A ComboBox {@link #doQuery uses filtering itself}, for information about filtering the ComboBox |
---|
| 76 | * store manually see <tt>{@link #lastQuery}</tt>.</p> |
---|
| 77 | * @constructor |
---|
| 78 | * Create a new ComboBox. |
---|
| 79 | * @param {Object} config Configuration options |
---|
| 80 | * @xtype combo |
---|
| 81 | */ |
---|
| 82 | Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, { |
---|
| 83 | /** |
---|
| 84 | * @cfg {Mixed} transform The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox. |
---|
| 85 | * Note that if you specify this and the combo is going to be in an {@link Ext.form.BasicForm} or |
---|
| 86 | * {@link Ext.form.FormPanel}, you must also set <tt>{@link #lazyRender} = true</tt>. |
---|
| 87 | */ |
---|
| 88 | /** |
---|
| 89 | * @cfg {Boolean} lazyRender <tt>true</tt> to prevent the ComboBox from rendering until requested |
---|
| 90 | * (should always be used when rendering into an {@link Ext.Editor} (e.g. {@link Ext.grid.EditorGridPanel Grids}), |
---|
| 91 | * defaults to <tt>false</tt>). |
---|
| 92 | */ |
---|
| 93 | /** |
---|
| 94 | * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or <tt>true</tt> for a default |
---|
| 95 | * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component. |
---|
| 96 | * See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details. Defaults to:</p> |
---|
| 97 | * <pre><code>{tag: "input", type: "text", size: "24", autocomplete: "off"}</code></pre> |
---|
| 98 | */ |
---|
| 99 | /** |
---|
| 100 | * @cfg {Ext.data.Store/Array} store The data source to which this combo is bound (defaults to <tt>undefined</tt>). |
---|
| 101 | * Acceptable values for this property are: |
---|
| 102 | * <div class="mdetail-params"><ul> |
---|
| 103 | * <li><b>any {@link Ext.data.Store Store} subclass</b></li> |
---|
| 104 | * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally, |
---|
| 105 | * automatically generating {@link Ext.data.Field#name field names} to work with all data components. |
---|
| 106 | * <div class="mdetail-params"><ul> |
---|
| 107 | * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc"> |
---|
| 108 | * A 1-dimensional array will automatically be expanded (each array item will be used for both the combo |
---|
| 109 | * {@link #valueField} and {@link #displayField})</div></li> |
---|
| 110 | * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc"> |
---|
| 111 | * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo |
---|
| 112 | * {@link #valueField}, while the value at index 1 is assumed to be the combo {@link #displayField}. |
---|
| 113 | * </div></li></ul></div></li></ul></div> |
---|
| 114 | * <p>See also <tt>{@link #mode}</tt>.</p> |
---|
| 115 | */ |
---|
| 116 | /** |
---|
| 117 | * @cfg {String} title If supplied, a header element is created containing this text and added into the top of |
---|
| 118 | * the dropdown list (defaults to undefined, with no header element) |
---|
| 119 | */ |
---|
| 120 | |
---|
| 121 | // private |
---|
| 122 | defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"}, |
---|
| 123 | /** |
---|
| 124 | * @cfg {Number} listWidth The width (used as a parameter to {@link Ext.Element#setWidth}) of the dropdown |
---|
| 125 | * list (defaults to the width of the ComboBox field). See also <tt>{@link #minListWidth} |
---|
| 126 | */ |
---|
| 127 | /** |
---|
| 128 | * @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this |
---|
| 129 | * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'field1'</tt> if |
---|
| 130 | * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on |
---|
| 131 | * the store configuration}). |
---|
| 132 | * <p>See also <tt>{@link #valueField}</tt>.</p> |
---|
| 133 | * <p><b>Note</b>: if using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a |
---|
| 134 | * {@link Ext.grid.Column#renderer renderer} will be needed to show the displayField when the editor is not |
---|
| 135 | * active.</p> |
---|
| 136 | */ |
---|
| 137 | /** |
---|
| 138 | * @cfg {String} valueField The underlying {@link Ext.data.Field#name data value name} to bind to this |
---|
| 139 | * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'field2'</tt> if |
---|
| 140 | * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on |
---|
| 141 | * the store configuration}). |
---|
| 142 | * <p><b>Note</b>: use of a <tt>valueField</tt> requires the user to make a selection in order for a value to be |
---|
| 143 | * mapped. See also <tt>{@link #hiddenName}</tt>, <tt>{@link #hiddenValue}</tt>, and <tt>{@link #displayField}</tt>.</p> |
---|
| 144 | */ |
---|
| 145 | /** |
---|
| 146 | * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the |
---|
| 147 | * field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically |
---|
| 148 | * post during a form submission. See also {@link #valueField}. |
---|
| 149 | */ |
---|
| 150 | /** |
---|
| 151 | * @cfg {String} hiddenId If <tt>{@link #hiddenName}</tt> is specified, <tt>hiddenId</tt> can also be provided |
---|
| 152 | * to give the hidden field a unique id. The <tt>hiddenId</tt> and combo {@link Ext.Component#id id} should be |
---|
| 153 | * different, since no two DOM nodes should share the same id. |
---|
| 154 | */ |
---|
| 155 | /** |
---|
| 156 | * @cfg {String} hiddenValue Sets the initial value of the hidden field if {@link #hiddenName} is |
---|
| 157 | * specified to contain the selected {@link #valueField}, from the Store. Defaults to the configured |
---|
| 158 | * <tt>{@link Ext.form.Field#value value}</tt>. |
---|
| 159 | */ |
---|
| 160 | /** |
---|
| 161 | * @cfg {String} listClass The CSS class to add to the predefined <tt>'x-combo-list'</tt> class |
---|
| 162 | * applied the dropdown list element (defaults to ''). |
---|
| 163 | */ |
---|
| 164 | listClass : '', |
---|
| 165 | /** |
---|
| 166 | * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list |
---|
| 167 | * (defaults to <tt>'x-combo-selected'</tt>) |
---|
| 168 | */ |
---|
| 169 | selectedClass : 'x-combo-selected', |
---|
| 170 | /** |
---|
| 171 | * @cfg {String} listEmptyText The empty text to display in the data view if no items are found. |
---|
| 172 | * (defaults to '') |
---|
| 173 | */ |
---|
| 174 | listEmptyText: '', |
---|
| 175 | /** |
---|
| 176 | * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always |
---|
| 177 | * get the class <tt>'x-form-trigger'</tt> and <tt>triggerClass</tt> will be <b>appended</b> if specified |
---|
| 178 | * (defaults to <tt>'x-form-arrow-trigger'</tt> which displays a downward arrow icon). |
---|
| 179 | */ |
---|
| 180 | triggerClass : 'x-form-arrow-trigger', |
---|
| 181 | /** |
---|
| 182 | * @cfg {Boolean/String} shadow <tt>true</tt> or <tt>"sides"</tt> for the default effect, <tt>"frame"</tt> for |
---|
| 183 | * 4-way shadow, and <tt>"drop"</tt> for bottom-right |
---|
| 184 | */ |
---|
| 185 | shadow : 'sides', |
---|
| 186 | /** |
---|
| 187 | * @cfg {String/Array} listAlign A valid anchor position value. See <tt>{@link Ext.Element#alignTo}</tt> for details |
---|
| 188 | * on supported anchor positions and offsets. To specify x/y offsets as well, this value |
---|
| 189 | * may be specified as an Array of <tt>{@link Ext.Element#alignTo}</tt> method arguments.</p> |
---|
| 190 | * <pre><code>[ 'tl-bl?', [6,0] ]</code></pre>(defaults to <tt>'tl-bl?'</tt>) |
---|
| 191 | */ |
---|
| 192 | listAlign : 'tl-bl?', |
---|
| 193 | /** |
---|
| 194 | * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown |
---|
| 195 | * (defaults to <tt>300</tt>) |
---|
| 196 | */ |
---|
| 197 | maxHeight : 300, |
---|
| 198 | /** |
---|
| 199 | * @cfg {Number} minHeight The minimum height in pixels of the dropdown list when the list is constrained by its |
---|
| 200 | * distance to the viewport edges (defaults to <tt>90</tt>) |
---|
| 201 | */ |
---|
| 202 | minHeight : 90, |
---|
| 203 | /** |
---|
| 204 | * @cfg {String} triggerAction The action to execute when the trigger is clicked. |
---|
| 205 | * <div class="mdetail-params"><ul> |
---|
| 206 | * <li><b><tt>'query'</tt></b> : <b>Default</b> |
---|
| 207 | * <p class="sub-desc">{@link #doQuery run the query} using the {@link Ext.form.Field#getRawValue raw value}.</p></li> |
---|
| 208 | * <li><b><tt>'all'</tt></b> : |
---|
| 209 | * <p class="sub-desc">{@link #doQuery run the query} specified by the <tt>{@link #allQuery}</tt> config option</p></li> |
---|
| 210 | * </ul></div> |
---|
| 211 | * <p>See also <code>{@link #queryParam}</code>.</p> |
---|
| 212 | */ |
---|
| 213 | triggerAction : 'query', |
---|
| 214 | /** |
---|
| 215 | * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and |
---|
| 216 | * {@link #typeAhead} activate (defaults to <tt>4</tt> if <tt>{@link #mode} = 'remote'</tt> or <tt>0</tt> if |
---|
| 217 | * <tt>{@link #mode} = 'local'</tt>, does not apply if |
---|
| 218 | * <tt>{@link Ext.form.TriggerField#editable editable} = false</tt>). |
---|
| 219 | */ |
---|
| 220 | minChars : 4, |
---|
| 221 | /** |
---|
| 222 | * @cfg {Boolean} autoSelect <tt>true</tt> to select the first result gathered by the data store (defaults |
---|
| 223 | * to <tt>true</tt>). A false value would require a manual selection from the dropdown list to set the components value |
---|
| 224 | * unless the value of ({@link #typeAheadDelay}) were true. |
---|
| 225 | */ |
---|
| 226 | autoSelect : true, |
---|
| 227 | /** |
---|
| 228 | * @cfg {Boolean} typeAhead <tt>true</tt> to populate and autoselect the remainder of the text being |
---|
| 229 | * typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults |
---|
| 230 | * to <tt>false</tt>) |
---|
| 231 | */ |
---|
| 232 | typeAhead : false, |
---|
| 233 | /** |
---|
| 234 | * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and |
---|
| 235 | * sending the query to filter the dropdown list (defaults to <tt>500</tt> if <tt>{@link #mode} = 'remote'</tt> |
---|
| 236 | * or <tt>10</tt> if <tt>{@link #mode} = 'local'</tt>) |
---|
| 237 | */ |
---|
| 238 | queryDelay : 500, |
---|
| 239 | /** |
---|
| 240 | * @cfg {Number} pageSize If greater than <tt>0</tt>, a {@link Ext.PagingToolbar} is displayed in the |
---|
| 241 | * footer of the dropdown list and the {@link #doQuery filter queries} will execute with page start and |
---|
| 242 | * {@link Ext.PagingToolbar#pageSize limit} parameters. Only applies when <tt>{@link #mode} = 'remote'</tt> |
---|
| 243 | * (defaults to <tt>0</tt>). |
---|
| 244 | */ |
---|
| 245 | pageSize : 0, |
---|
| 246 | /** |
---|
| 247 | * @cfg {Boolean} selectOnFocus <tt>true</tt> to select any existing text in the field immediately on focus. |
---|
| 248 | * Only applies when <tt>{@link Ext.form.TriggerField#editable editable} = true</tt> (defaults to |
---|
| 249 | * <tt>false</tt>). |
---|
| 250 | */ |
---|
| 251 | selectOnFocus : false, |
---|
| 252 | /** |
---|
| 253 | * @cfg {String} queryParam Name of the query ({@link Ext.data.Store#baseParam baseParam} name for the store) |
---|
| 254 | * as it will be passed on the querystring (defaults to <tt>'query'</tt>) |
---|
| 255 | */ |
---|
| 256 | queryParam : 'query', |
---|
| 257 | /** |
---|
| 258 | * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies |
---|
| 259 | * when <tt>{@link #mode} = 'remote'</tt> (defaults to <tt>'Loading...'</tt>) |
---|
| 260 | */ |
---|
| 261 | loadingText : 'Loading...', |
---|
| 262 | /** |
---|
| 263 | * @cfg {Boolean} resizable <tt>true</tt> to add a resize handle to the bottom of the dropdown list |
---|
| 264 | * (creates an {@link Ext.Resizable} with 'se' {@link Ext.Resizable#pinned pinned} handles). |
---|
| 265 | * Defaults to <tt>false</tt>. |
---|
| 266 | */ |
---|
| 267 | resizable : false, |
---|
| 268 | /** |
---|
| 269 | * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if |
---|
| 270 | * <tt>{@link #resizable} = true</tt> (defaults to <tt>8</tt>) |
---|
| 271 | */ |
---|
| 272 | handleHeight : 8, |
---|
| 273 | /** |
---|
| 274 | * @cfg {String} allQuery The text query to send to the server to return all records for the list |
---|
| 275 | * with no filtering (defaults to '') |
---|
| 276 | */ |
---|
| 277 | allQuery: '', |
---|
| 278 | /** |
---|
| 279 | * @cfg {String} mode Acceptable values are: |
---|
| 280 | * <div class="mdetail-params"><ul> |
---|
| 281 | * <li><b><tt>'remote'</tt></b> : <b>Default</b> |
---|
| 282 | * <p class="sub-desc">Automatically loads the <tt>{@link #store}</tt> the <b>first</b> time the trigger |
---|
| 283 | * is clicked. If you do not want the store to be automatically loaded the first time the trigger is |
---|
| 284 | * clicked, set to <tt>'local'</tt> and manually load the store. To force a requery of the store |
---|
| 285 | * <b>every</b> time the trigger is clicked see <tt>{@link #lastQuery}</tt>.</p></li> |
---|
| 286 | * <li><b><tt>'local'</tt></b> : |
---|
| 287 | * <p class="sub-desc">ComboBox loads local data</p> |
---|
| 288 | * <pre><code> |
---|
| 289 | var combo = new Ext.form.ComboBox({ |
---|
| 290 | renderTo: document.body, |
---|
| 291 | mode: 'local', |
---|
| 292 | store: new Ext.data.ArrayStore({ |
---|
| 293 | id: 0, |
---|
| 294 | fields: [ |
---|
| 295 | 'myId', // numeric value is the key |
---|
| 296 | 'displayText' |
---|
| 297 | ], |
---|
| 298 | data: [[1, 'item1'], [2, 'item2']] // data is local |
---|
| 299 | }), |
---|
| 300 | valueField: 'myId', |
---|
| 301 | displayField: 'displayText', |
---|
| 302 | triggerAction: 'all' |
---|
| 303 | }); |
---|
| 304 | * </code></pre></li> |
---|
| 305 | * </ul></div> |
---|
| 306 | */ |
---|
| 307 | mode: 'remote', |
---|
| 308 | /** |
---|
| 309 | * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to <tt>70</tt>, will |
---|
| 310 | * be ignored if <tt>{@link #listWidth}</tt> has a higher value) |
---|
| 311 | */ |
---|
| 312 | minListWidth : 70, |
---|
| 313 | /** |
---|
| 314 | * @cfg {Boolean} forceSelection <tt>true</tt> to restrict the selected value to one of the values in the list, |
---|
| 315 | * <tt>false</tt> to allow the user to set arbitrary text into the field (defaults to <tt>false</tt>) |
---|
| 316 | */ |
---|
| 317 | forceSelection : false, |
---|
| 318 | /** |
---|
| 319 | * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed |
---|
| 320 | * if <tt>{@link #typeAhead} = true</tt> (defaults to <tt>250</tt>) |
---|
| 321 | */ |
---|
| 322 | typeAheadDelay : 250, |
---|
| 323 | /** |
---|
| 324 | * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in |
---|
| 325 | * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined). If this |
---|
| 326 | * default text is used, it means there is no value set and no validation will occur on this field. |
---|
| 327 | */ |
---|
| 328 | |
---|
| 329 | /** |
---|
| 330 | * @cfg {Boolean} lazyInit <tt>true</tt> to not initialize the list for this combo until the field is focused |
---|
| 331 | * (defaults to <tt>true</tt>) |
---|
| 332 | */ |
---|
| 333 | lazyInit : true, |
---|
| 334 | |
---|
| 335 | /** |
---|
| 336 | * @cfg {Boolean} clearFilterOnReset <tt>true</tt> to clear any filters on the store (when in local mode) when reset is called |
---|
| 337 | * (defaults to <tt>true</tt>) |
---|
| 338 | */ |
---|
| 339 | clearFilterOnReset : true, |
---|
| 340 | |
---|
| 341 | /** |
---|
| 342 | * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post. |
---|
| 343 | * If a hiddenName is specified, setting this to true will cause both the hidden field and the element to be submitted. |
---|
| 344 | * Defaults to <tt>undefined</tt>. |
---|
| 345 | */ |
---|
| 346 | submitValue: undefined, |
---|
| 347 | |
---|
| 348 | /** |
---|
| 349 | * The value of the match string used to filter the store. Delete this property to force a requery. |
---|
| 350 | * Example use: |
---|
| 351 | * <pre><code> |
---|
| 352 | var combo = new Ext.form.ComboBox({ |
---|
| 353 | ... |
---|
| 354 | mode: 'remote', |
---|
| 355 | ... |
---|
| 356 | listeners: { |
---|
| 357 | // delete the previous query in the beforequery event or set |
---|
| 358 | // combo.lastQuery = null (this will reload the store the next time it expands) |
---|
| 359 | beforequery: function(qe){ |
---|
| 360 | delete qe.combo.lastQuery; |
---|
| 361 | } |
---|
| 362 | } |
---|
| 363 | }); |
---|
| 364 | * </code></pre> |
---|
| 365 | * To make sure the filter in the store is not cleared the first time the ComboBox trigger is used |
---|
| 366 | * configure the combo with <tt>lastQuery=''</tt>. Example use: |
---|
| 367 | * <pre><code> |
---|
| 368 | var combo = new Ext.form.ComboBox({ |
---|
| 369 | ... |
---|
| 370 | mode: 'local', |
---|
| 371 | triggerAction: 'all', |
---|
| 372 | lastQuery: '' |
---|
| 373 | }); |
---|
| 374 | * </code></pre> |
---|
| 375 | * @property lastQuery |
---|
| 376 | * @type String |
---|
| 377 | */ |
---|
| 378 | |
---|
| 379 | // private |
---|
| 380 | initComponent : function(){ |
---|
| 381 | Ext.form.ComboBox.superclass.initComponent.call(this); |
---|
| 382 | this.addEvents( |
---|
| 383 | /** |
---|
| 384 | * @event expand |
---|
| 385 | * Fires when the dropdown list is expanded |
---|
| 386 | * @param {Ext.form.ComboBox} combo This combo box |
---|
| 387 | */ |
---|
| 388 | 'expand', |
---|
| 389 | /** |
---|
| 390 | * @event collapse |
---|
| 391 | * Fires when the dropdown list is collapsed |
---|
| 392 | * @param {Ext.form.ComboBox} combo This combo box |
---|
| 393 | */ |
---|
| 394 | 'collapse', |
---|
| 395 | |
---|
| 396 | /** |
---|
| 397 | * @event beforeselect |
---|
| 398 | * Fires before a list item is selected. Return false to cancel the selection. |
---|
| 399 | * @param {Ext.form.ComboBox} combo This combo box |
---|
| 400 | * @param {Ext.data.Record} record The data record returned from the underlying store |
---|
| 401 | * @param {Number} index The index of the selected item in the dropdown list |
---|
| 402 | */ |
---|
| 403 | 'beforeselect', |
---|
| 404 | /** |
---|
| 405 | * @event select |
---|
| 406 | * Fires when a list item is selected |
---|
| 407 | * @param {Ext.form.ComboBox} combo This combo box |
---|
| 408 | * @param {Ext.data.Record} record The data record returned from the underlying store |
---|
| 409 | * @param {Number} index The index of the selected item in the dropdown list |
---|
| 410 | */ |
---|
| 411 | 'select', |
---|
| 412 | /** |
---|
| 413 | * @event beforequery |
---|
| 414 | * Fires before all queries are processed. Return false to cancel the query or set the queryEvent's |
---|
| 415 | * cancel property to true. |
---|
| 416 | * @param {Object} queryEvent An object that has these properties:<ul> |
---|
| 417 | * <li><code>combo</code> : Ext.form.ComboBox <div class="sub-desc">This combo box</div></li> |
---|
| 418 | * <li><code>query</code> : String <div class="sub-desc">The query</div></li> |
---|
| 419 | * <li><code>forceAll</code> : Boolean <div class="sub-desc">True to force "all" query</div></li> |
---|
| 420 | * <li><code>cancel</code> : Boolean <div class="sub-desc">Set to true to cancel the query</div></li> |
---|
| 421 | * </ul> |
---|
| 422 | */ |
---|
| 423 | 'beforequery' |
---|
| 424 | ); |
---|
| 425 | if(this.transform){ |
---|
| 426 | var s = Ext.getDom(this.transform); |
---|
| 427 | if(!this.hiddenName){ |
---|
| 428 | this.hiddenName = s.name; |
---|
| 429 | } |
---|
| 430 | if(!this.store){ |
---|
| 431 | this.mode = 'local'; |
---|
| 432 | var d = [], opts = s.options; |
---|
| 433 | for(var i = 0, len = opts.length;i < len; i++){ |
---|
| 434 | var o = opts[i], |
---|
| 435 | value = (o.hasAttribute ? o.hasAttribute('value') : o.getAttributeNode('value').specified) ? o.value : o.text; |
---|
| 436 | if(o.selected && Ext.isEmpty(this.value, true)) { |
---|
| 437 | this.value = value; |
---|
| 438 | } |
---|
| 439 | d.push([value, o.text]); |
---|
| 440 | } |
---|
| 441 | this.store = new Ext.data.ArrayStore({ |
---|
| 442 | idIndex: 0, |
---|
| 443 | fields: ['value', 'text'], |
---|
| 444 | data : d, |
---|
| 445 | autoDestroy: true |
---|
| 446 | }); |
---|
| 447 | this.valueField = 'value'; |
---|
| 448 | this.displayField = 'text'; |
---|
| 449 | } |
---|
| 450 | s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference |
---|
| 451 | if(!this.lazyRender){ |
---|
| 452 | this.target = true; |
---|
| 453 | this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate); |
---|
| 454 | this.render(this.el.parentNode, s); |
---|
| 455 | } |
---|
| 456 | Ext.removeNode(s); |
---|
| 457 | } |
---|
| 458 | //auto-configure store from local array data |
---|
| 459 | else if(this.store){ |
---|
| 460 | this.store = Ext.StoreMgr.lookup(this.store); |
---|
| 461 | if(this.store.autoCreated){ |
---|
| 462 | this.displayField = this.valueField = 'field1'; |
---|
| 463 | if(!this.store.expandData){ |
---|
| 464 | this.displayField = 'field2'; |
---|
| 465 | } |
---|
| 466 | this.mode = 'local'; |
---|
| 467 | } |
---|
| 468 | } |
---|
| 469 | |
---|
| 470 | this.selectedIndex = -1; |
---|
| 471 | if(this.mode == 'local'){ |
---|
| 472 | if(!Ext.isDefined(this.initialConfig.queryDelay)){ |
---|
| 473 | this.queryDelay = 10; |
---|
| 474 | } |
---|
| 475 | if(!Ext.isDefined(this.initialConfig.minChars)){ |
---|
| 476 | this.minChars = 0; |
---|
| 477 | } |
---|
| 478 | } |
---|
| 479 | }, |
---|
| 480 | |
---|
| 481 | // private |
---|
| 482 | onRender : function(ct, position){ |
---|
| 483 | if(this.hiddenName && !Ext.isDefined(this.submitValue)){ |
---|
| 484 | this.submitValue = false; |
---|
| 485 | } |
---|
| 486 | Ext.form.ComboBox.superclass.onRender.call(this, ct, position); |
---|
| 487 | if(this.hiddenName){ |
---|
| 488 | this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, |
---|
| 489 | id: (this.hiddenId || Ext.id())}, 'before', true); |
---|
| 490 | |
---|
| 491 | } |
---|
| 492 | if(Ext.isGecko){ |
---|
| 493 | this.el.dom.setAttribute('autocomplete', 'off'); |
---|
| 494 | } |
---|
| 495 | |
---|
| 496 | if(!this.lazyInit){ |
---|
| 497 | this.initList(); |
---|
| 498 | }else{ |
---|
| 499 | this.on('focus', this.initList, this, {single: true}); |
---|
| 500 | } |
---|
| 501 | }, |
---|
| 502 | |
---|
| 503 | // private |
---|
| 504 | initValue : function(){ |
---|
| 505 | Ext.form.ComboBox.superclass.initValue.call(this); |
---|
| 506 | if(this.hiddenField){ |
---|
| 507 | this.hiddenField.value = |
---|
| 508 | Ext.value(Ext.isDefined(this.hiddenValue) ? this.hiddenValue : this.value, ''); |
---|
| 509 | } |
---|
| 510 | }, |
---|
| 511 | |
---|
| 512 | getParentZIndex : function(){ |
---|
| 513 | var zindex; |
---|
| 514 | if (this.ownerCt){ |
---|
| 515 | this.findParentBy(function(ct){ |
---|
| 516 | zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10); |
---|
| 517 | return !!zindex; |
---|
| 518 | }); |
---|
| 519 | } |
---|
| 520 | return zindex; |
---|
| 521 | }, |
---|
| 522 | |
---|
| 523 | getZIndex : function(listParent){ |
---|
| 524 | listParent = listParent || Ext.getDom(this.getListParent() || Ext.getBody()); |
---|
| 525 | var zindex = parseInt(Ext.fly(listParent).getStyle('z-index'), 10); |
---|
| 526 | if(!zindex){ |
---|
| 527 | zindex = this.getParentZIndex(); |
---|
| 528 | } |
---|
| 529 | return (zindex || 12000) + 5; |
---|
| 530 | }, |
---|
| 531 | |
---|
| 532 | // private |
---|
| 533 | initList : function(){ |
---|
| 534 | if(!this.list){ |
---|
| 535 | var cls = 'x-combo-list', |
---|
| 536 | listParent = Ext.getDom(this.getListParent() || Ext.getBody()); |
---|
| 537 | |
---|
| 538 | this.list = new Ext.Layer({ |
---|
| 539 | parentEl: listParent, |
---|
| 540 | shadow: this.shadow, |
---|
| 541 | cls: [cls, this.listClass].join(' '), |
---|
| 542 | constrain:false, |
---|
| 543 | zindex: this.getZIndex(listParent) |
---|
| 544 | }); |
---|
| 545 | |
---|
| 546 | var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth); |
---|
| 547 | this.list.setSize(lw, 0); |
---|
| 548 | this.list.swallowEvent('mousewheel'); |
---|
| 549 | this.assetHeight = 0; |
---|
| 550 | if(this.syncFont !== false){ |
---|
| 551 | this.list.setStyle('font-size', this.el.getStyle('font-size')); |
---|
| 552 | } |
---|
| 553 | if(this.title){ |
---|
| 554 | this.header = this.list.createChild({cls:cls+'-hd', html: this.title}); |
---|
| 555 | this.assetHeight += this.header.getHeight(); |
---|
| 556 | } |
---|
| 557 | |
---|
| 558 | this.innerList = this.list.createChild({cls:cls+'-inner'}); |
---|
| 559 | this.mon(this.innerList, 'mouseover', this.onViewOver, this); |
---|
| 560 | this.mon(this.innerList, 'mousemove', this.onViewMove, this); |
---|
| 561 | this.innerList.setWidth(lw - this.list.getFrameWidth('lr')); |
---|
| 562 | |
---|
| 563 | if(this.pageSize){ |
---|
| 564 | this.footer = this.list.createChild({cls:cls+'-ft'}); |
---|
| 565 | this.pageTb = new Ext.PagingToolbar({ |
---|
| 566 | store: this.store, |
---|
| 567 | pageSize: this.pageSize, |
---|
| 568 | renderTo:this.footer |
---|
| 569 | }); |
---|
| 570 | this.assetHeight += this.footer.getHeight(); |
---|
| 571 | } |
---|
| 572 | |
---|
| 573 | if(!this.tpl){ |
---|
| 574 | /** |
---|
| 575 | * @cfg {String/Ext.XTemplate} tpl <p>The template string, or {@link Ext.XTemplate} instance to |
---|
| 576 | * use to display each item in the dropdown list. The dropdown list is displayed in a |
---|
| 577 | * DataView. See {@link #view}.</p> |
---|
| 578 | * <p>The default template string is:</p><pre><code> |
---|
| 579 | '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>' |
---|
| 580 | * </code></pre> |
---|
| 581 | * <p>Override the default value to create custom UI layouts for items in the list. |
---|
| 582 | * For example:</p><pre><code> |
---|
| 583 | '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>' |
---|
| 584 | * </code></pre> |
---|
| 585 | * <p>The template <b>must</b> contain one or more substitution parameters using field |
---|
| 586 | * names from the Combo's</b> {@link #store Store}. In the example above an |
---|
| 587 | * <pre>ext:qtip</pre> attribute is added to display other fields from the Store.</p> |
---|
| 588 | * <p>To preserve the default visual look of list items, add the CSS class name |
---|
| 589 | * <pre>x-combo-list-item</pre> to the template's container element.</p> |
---|
| 590 | * <p>Also see {@link #itemSelector} for additional details.</p> |
---|
| 591 | */ |
---|
| 592 | this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>'; |
---|
| 593 | /** |
---|
| 594 | * @cfg {String} itemSelector |
---|
| 595 | * <p>A simple CSS selector (e.g. div.some-class or span:first-child) that will be |
---|
| 596 | * used to determine what nodes the {@link #view Ext.DataView} which handles the dropdown |
---|
| 597 | * display will be working with.</p> |
---|
| 598 | * <p><b>Note</b>: this setting is <b>required</b> if a custom XTemplate has been |
---|
| 599 | * specified in {@link #tpl} which assigns a class other than <pre>'x-combo-list-item'</pre> |
---|
| 600 | * to dropdown list items</b> |
---|
| 601 | */ |
---|
| 602 | } |
---|
| 603 | |
---|
| 604 | /** |
---|
| 605 | * The {@link Ext.DataView DataView} used to display the ComboBox's options. |
---|
| 606 | * @type Ext.DataView |
---|
| 607 | */ |
---|
| 608 | this.view = new Ext.DataView({ |
---|
| 609 | applyTo: this.innerList, |
---|
| 610 | tpl: this.tpl, |
---|
| 611 | singleSelect: true, |
---|
| 612 | selectedClass: this.selectedClass, |
---|
| 613 | itemSelector: this.itemSelector || '.' + cls + '-item', |
---|
| 614 | emptyText: this.listEmptyText, |
---|
| 615 | deferEmptyText: false |
---|
| 616 | }); |
---|
| 617 | |
---|
| 618 | this.mon(this.view, { |
---|
| 619 | containerclick : this.onViewClick, |
---|
| 620 | click : this.onViewClick, |
---|
| 621 | scope :this |
---|
| 622 | }); |
---|
| 623 | |
---|
| 624 | this.bindStore(this.store, true); |
---|
| 625 | |
---|
| 626 | if(this.resizable){ |
---|
| 627 | this.resizer = new Ext.Resizable(this.list, { |
---|
| 628 | pinned:true, handles:'se' |
---|
| 629 | }); |
---|
| 630 | this.mon(this.resizer, 'resize', function(r, w, h){ |
---|
| 631 | this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight; |
---|
| 632 | this.listWidth = w; |
---|
| 633 | this.innerList.setWidth(w - this.list.getFrameWidth('lr')); |
---|
| 634 | this.restrictHeight(); |
---|
| 635 | }, this); |
---|
| 636 | |
---|
| 637 | this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px'); |
---|
| 638 | } |
---|
| 639 | } |
---|
| 640 | }, |
---|
| 641 | |
---|
| 642 | /** |
---|
| 643 | * <p>Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.</p> |
---|
| 644 | * A custom implementation may be provided as a configuration option if the floating list needs to be rendered |
---|
| 645 | * to a different Element. An example might be rendering the list inside a Menu so that clicking |
---|
| 646 | * the list does not hide the Menu:<pre><code> |
---|
| 647 | var store = new Ext.data.ArrayStore({ |
---|
| 648 | autoDestroy: true, |
---|
| 649 | fields: ['initials', 'fullname'], |
---|
| 650 | data : [ |
---|
| 651 | ['FF', 'Fred Flintstone'], |
---|
| 652 | ['BR', 'Barney Rubble'] |
---|
| 653 | ] |
---|
| 654 | }); |
---|
| 655 | |
---|
| 656 | var combo = new Ext.form.ComboBox({ |
---|
| 657 | store: store, |
---|
| 658 | displayField: 'fullname', |
---|
| 659 | emptyText: 'Select a name...', |
---|
| 660 | forceSelection: true, |
---|
| 661 | getListParent: function() { |
---|
| 662 | return this.el.up('.x-menu'); |
---|
| 663 | }, |
---|
| 664 | iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu |
---|
| 665 | mode: 'local', |
---|
| 666 | selectOnFocus: true, |
---|
| 667 | triggerAction: 'all', |
---|
| 668 | typeAhead: true, |
---|
| 669 | width: 135 |
---|
| 670 | }); |
---|
| 671 | |
---|
| 672 | var menu = new Ext.menu.Menu({ |
---|
| 673 | id: 'mainMenu', |
---|
| 674 | items: [ |
---|
| 675 | combo // A Field in a Menu |
---|
| 676 | ] |
---|
| 677 | }); |
---|
| 678 | </code></pre> |
---|
| 679 | */ |
---|
| 680 | getListParent : function() { |
---|
| 681 | return document.body; |
---|
| 682 | }, |
---|
| 683 | |
---|
| 684 | /** |
---|
| 685 | * Returns the store associated with this combo. |
---|
| 686 | * @return {Ext.data.Store} The store |
---|
| 687 | */ |
---|
| 688 | getStore : function(){ |
---|
| 689 | return this.store; |
---|
| 690 | }, |
---|
| 691 | |
---|
| 692 | // private |
---|
| 693 | bindStore : function(store, initial){ |
---|
| 694 | if(this.store && !initial){ |
---|
| 695 | if(this.store !== store && this.store.autoDestroy){ |
---|
| 696 | this.store.destroy(); |
---|
| 697 | }else{ |
---|
| 698 | this.store.un('beforeload', this.onBeforeLoad, this); |
---|
| 699 | this.store.un('load', this.onLoad, this); |
---|
| 700 | this.store.un('exception', this.collapse, this); |
---|
| 701 | } |
---|
| 702 | if(!store){ |
---|
| 703 | this.store = null; |
---|
| 704 | if(this.view){ |
---|
| 705 | this.view.bindStore(null); |
---|
| 706 | } |
---|
| 707 | if(this.pageTb){ |
---|
| 708 | this.pageTb.bindStore(null); |
---|
| 709 | } |
---|
| 710 | } |
---|
| 711 | } |
---|
| 712 | if(store){ |
---|
| 713 | if(!initial) { |
---|
| 714 | this.lastQuery = null; |
---|
| 715 | if(this.pageTb) { |
---|
| 716 | this.pageTb.bindStore(store); |
---|
| 717 | } |
---|
| 718 | } |
---|
| 719 | |
---|
| 720 | this.store = Ext.StoreMgr.lookup(store); |
---|
| 721 | this.store.on({ |
---|
| 722 | scope: this, |
---|
| 723 | beforeload: this.onBeforeLoad, |
---|
| 724 | load: this.onLoad, |
---|
| 725 | exception: this.collapse |
---|
| 726 | }); |
---|
| 727 | |
---|
| 728 | if(this.view){ |
---|
| 729 | this.view.bindStore(store); |
---|
| 730 | } |
---|
| 731 | } |
---|
| 732 | }, |
---|
| 733 | |
---|
| 734 | reset : function(){ |
---|
| 735 | if(this.clearFilterOnReset && this.mode == 'local'){ |
---|
| 736 | this.store.clearFilter(); |
---|
| 737 | } |
---|
| 738 | Ext.form.ComboBox.superclass.reset.call(this); |
---|
| 739 | }, |
---|
| 740 | |
---|
| 741 | // private |
---|
| 742 | initEvents : function(){ |
---|
| 743 | Ext.form.ComboBox.superclass.initEvents.call(this); |
---|
| 744 | |
---|
| 745 | /** |
---|
| 746 | * @property keyNav |
---|
| 747 | * @type Ext.KeyNav |
---|
| 748 | * <p>A {@link Ext.KeyNav KeyNav} object which handles navigation keys for this ComboBox. This performs actions |
---|
| 749 | * based on keystrokes typed when the input field is focused.</p> |
---|
| 750 | * <p><b>After the ComboBox has been rendered</b>, you may override existing navigation key functionality, |
---|
| 751 | * or add your own based upon key names as specified in the {@link Ext.KeyNav KeyNav} class.</p> |
---|
| 752 | * <p>The function is executed in the scope (<code>this</code> reference of the ComboBox. Example:</p><pre><code> |
---|
| 753 | myCombo.keyNav.esc = function(e) { // Override ESC handling function |
---|
| 754 | this.collapse(); // Standard behaviour of Ext's ComboBox. |
---|
| 755 | this.setValue(this.startValue); // We reset to starting value on ESC |
---|
| 756 | }; |
---|
| 757 | myCombo.keyNav.tab = function() { // Override TAB handling function |
---|
| 758 | this.onViewClick(false); // Select the currently highlighted row |
---|
| 759 | }; |
---|
| 760 | </code></pre> |
---|
| 761 | */ |
---|
| 762 | this.keyNav = new Ext.KeyNav(this.el, { |
---|
| 763 | "up" : function(e){ |
---|
| 764 | this.inKeyMode = true; |
---|
| 765 | this.selectPrev(); |
---|
| 766 | }, |
---|
| 767 | |
---|
| 768 | "down" : function(e){ |
---|
| 769 | if(!this.isExpanded()){ |
---|
| 770 | this.onTriggerClick(); |
---|
| 771 | }else{ |
---|
| 772 | this.inKeyMode = true; |
---|
| 773 | this.selectNext(); |
---|
| 774 | } |
---|
| 775 | }, |
---|
| 776 | |
---|
| 777 | "enter" : function(e){ |
---|
| 778 | this.onViewClick(); |
---|
| 779 | }, |
---|
| 780 | |
---|
| 781 | "esc" : function(e){ |
---|
| 782 | this.collapse(); |
---|
| 783 | }, |
---|
| 784 | |
---|
| 785 | "tab" : function(e){ |
---|
| 786 | if (this.forceSelection === true) { |
---|
| 787 | this.collapse(); |
---|
| 788 | } else { |
---|
| 789 | this.onViewClick(false); |
---|
| 790 | } |
---|
| 791 | return true; |
---|
| 792 | }, |
---|
| 793 | |
---|
| 794 | scope : this, |
---|
| 795 | |
---|
| 796 | doRelay : function(e, h, hname){ |
---|
| 797 | if(hname == 'down' || this.scope.isExpanded()){ |
---|
| 798 | // this MUST be called before ComboBox#fireKey() |
---|
| 799 | var relay = Ext.KeyNav.prototype.doRelay.apply(this, arguments); |
---|
| 800 | if(!Ext.isIE && Ext.EventManager.useKeydown){ |
---|
| 801 | // call Combo#fireKey() for browsers which use keydown event (except IE) |
---|
| 802 | this.scope.fireKey(e); |
---|
| 803 | } |
---|
| 804 | return relay; |
---|
| 805 | } |
---|
| 806 | return true; |
---|
| 807 | }, |
---|
| 808 | |
---|
| 809 | forceKeyDown : true, |
---|
| 810 | defaultEventAction: 'stopEvent' |
---|
| 811 | }); |
---|
| 812 | this.queryDelay = Math.max(this.queryDelay || 10, |
---|
| 813 | this.mode == 'local' ? 10 : 250); |
---|
| 814 | this.dqTask = new Ext.util.DelayedTask(this.initQuery, this); |
---|
| 815 | if(this.typeAhead){ |
---|
| 816 | this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this); |
---|
| 817 | } |
---|
| 818 | if(!this.enableKeyEvents){ |
---|
| 819 | this.mon(this.el, 'keyup', this.onKeyUp, this); |
---|
| 820 | } |
---|
| 821 | }, |
---|
| 822 | |
---|
| 823 | |
---|
| 824 | // private |
---|
| 825 | onDestroy : function(){ |
---|
| 826 | if (this.dqTask){ |
---|
| 827 | this.dqTask.cancel(); |
---|
| 828 | this.dqTask = null; |
---|
| 829 | } |
---|
| 830 | this.bindStore(null); |
---|
| 831 | Ext.destroy( |
---|
| 832 | this.resizer, |
---|
| 833 | this.view, |
---|
| 834 | this.pageTb, |
---|
| 835 | this.list |
---|
| 836 | ); |
---|
| 837 | Ext.destroyMembers(this, 'hiddenField'); |
---|
| 838 | Ext.form.ComboBox.superclass.onDestroy.call(this); |
---|
| 839 | }, |
---|
| 840 | |
---|
| 841 | // private |
---|
| 842 | fireKey : function(e){ |
---|
| 843 | if (!this.isExpanded()) { |
---|
| 844 | Ext.form.ComboBox.superclass.fireKey.call(this, e); |
---|
| 845 | } |
---|
| 846 | }, |
---|
| 847 | |
---|
| 848 | // private |
---|
| 849 | onResize : function(w, h){ |
---|
| 850 | Ext.form.ComboBox.superclass.onResize.apply(this, arguments); |
---|
| 851 | if(!isNaN(w) && this.isVisible() && this.list){ |
---|
| 852 | this.doResize(w); |
---|
| 853 | }else{ |
---|
| 854 | this.bufferSize = w; |
---|
| 855 | } |
---|
| 856 | }, |
---|
| 857 | |
---|
| 858 | doResize: function(w){ |
---|
| 859 | if(!Ext.isDefined(this.listWidth)){ |
---|
| 860 | var lw = Math.max(w, this.minListWidth); |
---|
| 861 | this.list.setWidth(lw); |
---|
| 862 | this.innerList.setWidth(lw - this.list.getFrameWidth('lr')); |
---|
| 863 | } |
---|
| 864 | }, |
---|
| 865 | |
---|
| 866 | // private |
---|
| 867 | onEnable : function(){ |
---|
| 868 | Ext.form.ComboBox.superclass.onEnable.apply(this, arguments); |
---|
| 869 | if(this.hiddenField){ |
---|
| 870 | this.hiddenField.disabled = false; |
---|
| 871 | } |
---|
| 872 | }, |
---|
| 873 | |
---|
| 874 | // private |
---|
| 875 | onDisable : function(){ |
---|
| 876 | Ext.form.ComboBox.superclass.onDisable.apply(this, arguments); |
---|
| 877 | if(this.hiddenField){ |
---|
| 878 | this.hiddenField.disabled = true; |
---|
| 879 | } |
---|
| 880 | }, |
---|
| 881 | |
---|
| 882 | // private |
---|
| 883 | onBeforeLoad : function(){ |
---|
| 884 | if(!this.hasFocus){ |
---|
| 885 | return; |
---|
| 886 | } |
---|
| 887 | this.innerList.update(this.loadingText ? |
---|
| 888 | '<div class="loading-indicator">'+this.loadingText+'</div>' : ''); |
---|
| 889 | this.restrictHeight(); |
---|
| 890 | this.selectedIndex = -1; |
---|
| 891 | }, |
---|
| 892 | |
---|
| 893 | // private |
---|
| 894 | onLoad : function(){ |
---|
| 895 | if(!this.hasFocus){ |
---|
| 896 | return; |
---|
| 897 | } |
---|
| 898 | if(this.store.getCount() > 0 || this.listEmptyText){ |
---|
| 899 | this.expand(); |
---|
| 900 | this.restrictHeight(); |
---|
| 901 | if(this.lastQuery == this.allQuery){ |
---|
| 902 | if(this.editable){ |
---|
| 903 | this.el.dom.select(); |
---|
| 904 | } |
---|
| 905 | |
---|
| 906 | if(this.autoSelect !== false && !this.selectByValue(this.value, true)){ |
---|
| 907 | this.select(0, true); |
---|
| 908 | } |
---|
| 909 | }else{ |
---|
| 910 | if(this.autoSelect !== false){ |
---|
| 911 | this.selectNext(); |
---|
| 912 | } |
---|
| 913 | if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){ |
---|
| 914 | this.taTask.delay(this.typeAheadDelay); |
---|
| 915 | } |
---|
| 916 | } |
---|
| 917 | }else{ |
---|
| 918 | this.collapse(); |
---|
| 919 | } |
---|
| 920 | |
---|
| 921 | }, |
---|
| 922 | |
---|
| 923 | // private |
---|
| 924 | onTypeAhead : function(){ |
---|
| 925 | if(this.store.getCount() > 0){ |
---|
| 926 | var r = this.store.getAt(0); |
---|
| 927 | var newValue = r.data[this.displayField]; |
---|
| 928 | var len = newValue.length; |
---|
| 929 | var selStart = this.getRawValue().length; |
---|
| 930 | if(selStart != len){ |
---|
| 931 | this.setRawValue(newValue); |
---|
| 932 | this.selectText(selStart, newValue.length); |
---|
| 933 | } |
---|
| 934 | } |
---|
| 935 | }, |
---|
| 936 | |
---|
| 937 | // private |
---|
| 938 | assertValue : function(){ |
---|
| 939 | var val = this.getRawValue(), |
---|
| 940 | rec; |
---|
| 941 | |
---|
| 942 | if(this.valueField && Ext.isDefined(this.value)){ |
---|
| 943 | rec = this.findRecord(this.valueField, this.value); |
---|
| 944 | } |
---|
| 945 | if(!rec || rec.get(this.displayField) != val){ |
---|
| 946 | rec = this.findRecord(this.displayField, val); |
---|
| 947 | } |
---|
| 948 | if(!rec && this.forceSelection){ |
---|
| 949 | if(val.length > 0 && val != this.emptyText){ |
---|
| 950 | this.el.dom.value = Ext.value(this.lastSelectionText, ''); |
---|
| 951 | this.applyEmptyText(); |
---|
| 952 | }else{ |
---|
| 953 | this.clearValue(); |
---|
| 954 | } |
---|
| 955 | }else{ |
---|
| 956 | if(rec && this.valueField){ |
---|
| 957 | // onSelect may have already set the value and by doing so |
---|
| 958 | // set the display field properly. Let's not wipe out the |
---|
| 959 | // valueField here by just sending the displayField. |
---|
| 960 | if (this.value == val){ |
---|
| 961 | return; |
---|
| 962 | } |
---|
| 963 | val = rec.get(this.valueField || this.displayField); |
---|
| 964 | } |
---|
| 965 | this.setValue(val); |
---|
| 966 | } |
---|
| 967 | }, |
---|
| 968 | |
---|
| 969 | // private |
---|
| 970 | onSelect : function(record, index){ |
---|
| 971 | if(this.fireEvent('beforeselect', this, record, index) !== false){ |
---|
| 972 | this.setValue(record.data[this.valueField || this.displayField]); |
---|
| 973 | this.collapse(); |
---|
| 974 | this.fireEvent('select', this, record, index); |
---|
| 975 | } |
---|
| 976 | }, |
---|
| 977 | |
---|
| 978 | // inherit docs |
---|
| 979 | getName: function(){ |
---|
| 980 | var hf = this.hiddenField; |
---|
| 981 | return hf && hf.name ? hf.name : this.hiddenName || Ext.form.ComboBox.superclass.getName.call(this); |
---|
| 982 | }, |
---|
| 983 | |
---|
| 984 | /** |
---|
| 985 | * Returns the currently selected field value or empty string if no value is set. |
---|
| 986 | * @return {String} value The selected value |
---|
| 987 | */ |
---|
| 988 | getValue : function(){ |
---|
| 989 | if(this.valueField){ |
---|
| 990 | return Ext.isDefined(this.value) ? this.value : ''; |
---|
| 991 | }else{ |
---|
| 992 | return Ext.form.ComboBox.superclass.getValue.call(this); |
---|
| 993 | } |
---|
| 994 | }, |
---|
| 995 | |
---|
| 996 | /** |
---|
| 997 | * Clears any text/value currently set in the field |
---|
| 998 | */ |
---|
| 999 | clearValue : function(){ |
---|
| 1000 | if(this.hiddenField){ |
---|
| 1001 | this.hiddenField.value = ''; |
---|
| 1002 | } |
---|
| 1003 | this.setRawValue(''); |
---|
| 1004 | this.lastSelectionText = ''; |
---|
| 1005 | this.applyEmptyText(); |
---|
| 1006 | this.value = ''; |
---|
| 1007 | }, |
---|
| 1008 | |
---|
| 1009 | /** |
---|
| 1010 | * Sets the specified value into the field. If the value finds a match, the corresponding record text |
---|
| 1011 | * will be displayed in the field. If the value does not match the data value of an existing item, |
---|
| 1012 | * and the valueNotFoundText config option is defined, it will be displayed as the default field text. |
---|
| 1013 | * Otherwise the field will be blank (although the value will still be set). |
---|
| 1014 | * @param {String} value The value to match |
---|
| 1015 | * @return {Ext.form.Field} this |
---|
| 1016 | */ |
---|
| 1017 | setValue : function(v){ |
---|
| 1018 | var text = v; |
---|
| 1019 | if(this.valueField){ |
---|
| 1020 | var r = this.findRecord(this.valueField, v); |
---|
| 1021 | if(r){ |
---|
| 1022 | text = r.data[this.displayField]; |
---|
| 1023 | }else if(Ext.isDefined(this.valueNotFoundText)){ |
---|
| 1024 | text = this.valueNotFoundText; |
---|
| 1025 | } |
---|
| 1026 | } |
---|
| 1027 | this.lastSelectionText = text; |
---|
| 1028 | if(this.hiddenField){ |
---|
| 1029 | this.hiddenField.value = Ext.value(v, ''); |
---|
| 1030 | } |
---|
| 1031 | Ext.form.ComboBox.superclass.setValue.call(this, text); |
---|
| 1032 | this.value = v; |
---|
| 1033 | return this; |
---|
| 1034 | }, |
---|
| 1035 | |
---|
| 1036 | // private |
---|
| 1037 | findRecord : function(prop, value){ |
---|
| 1038 | var record; |
---|
| 1039 | if(this.store.getCount() > 0){ |
---|
| 1040 | this.store.each(function(r){ |
---|
| 1041 | if(r.data[prop] == value){ |
---|
| 1042 | record = r; |
---|
| 1043 | return false; |
---|
| 1044 | } |
---|
| 1045 | }); |
---|
| 1046 | } |
---|
| 1047 | return record; |
---|
| 1048 | }, |
---|
| 1049 | |
---|
| 1050 | // private |
---|
| 1051 | onViewMove : function(e, t){ |
---|
| 1052 | this.inKeyMode = false; |
---|
| 1053 | }, |
---|
| 1054 | |
---|
| 1055 | // private |
---|
| 1056 | onViewOver : function(e, t){ |
---|
| 1057 | if(this.inKeyMode){ // prevent key nav and mouse over conflicts |
---|
| 1058 | return; |
---|
| 1059 | } |
---|
| 1060 | var item = this.view.findItemFromChild(t); |
---|
| 1061 | if(item){ |
---|
| 1062 | var index = this.view.indexOf(item); |
---|
| 1063 | this.select(index, false); |
---|
| 1064 | } |
---|
| 1065 | }, |
---|
| 1066 | |
---|
| 1067 | // private |
---|
| 1068 | onViewClick : function(doFocus){ |
---|
| 1069 | var index = this.view.getSelectedIndexes()[0], |
---|
| 1070 | s = this.store, |
---|
| 1071 | r = s.getAt(index); |
---|
| 1072 | if(r){ |
---|
| 1073 | this.onSelect(r, index); |
---|
| 1074 | }else { |
---|
| 1075 | this.collapse(); |
---|
| 1076 | } |
---|
| 1077 | if(doFocus !== false){ |
---|
| 1078 | this.el.focus(); |
---|
| 1079 | } |
---|
| 1080 | }, |
---|
| 1081 | |
---|
| 1082 | |
---|
| 1083 | // private |
---|
| 1084 | restrictHeight : function(){ |
---|
| 1085 | this.innerList.dom.style.height = ''; |
---|
| 1086 | var inner = this.innerList.dom, |
---|
| 1087 | pad = this.list.getFrameWidth('tb') + (this.resizable ? this.handleHeight : 0) + this.assetHeight, |
---|
| 1088 | h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight), |
---|
| 1089 | ha = this.getPosition()[1]-Ext.getBody().getScroll().top, |
---|
| 1090 | hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height, |
---|
| 1091 | space = Math.max(ha, hb, this.minHeight || 0)-this.list.shadowOffset-pad-5; |
---|
| 1092 | |
---|
| 1093 | h = Math.min(h, space, this.maxHeight); |
---|
| 1094 | |
---|
| 1095 | this.innerList.setHeight(h); |
---|
| 1096 | this.list.beginUpdate(); |
---|
| 1097 | this.list.setHeight(h+pad); |
---|
| 1098 | this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign)); |
---|
| 1099 | this.list.endUpdate(); |
---|
| 1100 | }, |
---|
| 1101 | |
---|
| 1102 | /** |
---|
| 1103 | * Returns true if the dropdown list is expanded, else false. |
---|
| 1104 | */ |
---|
| 1105 | isExpanded : function(){ |
---|
| 1106 | return this.list && this.list.isVisible(); |
---|
| 1107 | }, |
---|
| 1108 | |
---|
| 1109 | /** |
---|
| 1110 | * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire. |
---|
| 1111 | * The store must be loaded and the list expanded for this function to work, otherwise use setValue. |
---|
| 1112 | * @param {String} value The data value of the item to select |
---|
| 1113 | * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the |
---|
| 1114 | * selected item if it is not currently in view (defaults to true) |
---|
| 1115 | * @return {Boolean} True if the value matched an item in the list, else false |
---|
| 1116 | */ |
---|
| 1117 | selectByValue : function(v, scrollIntoView){ |
---|
| 1118 | if(!Ext.isEmpty(v, true)){ |
---|
| 1119 | var r = this.findRecord(this.valueField || this.displayField, v); |
---|
| 1120 | if(r){ |
---|
| 1121 | this.select(this.store.indexOf(r), scrollIntoView); |
---|
| 1122 | return true; |
---|
| 1123 | } |
---|
| 1124 | } |
---|
| 1125 | return false; |
---|
| 1126 | }, |
---|
| 1127 | |
---|
| 1128 | /** |
---|
| 1129 | * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire. |
---|
| 1130 | * The store must be loaded and the list expanded for this function to work, otherwise use setValue. |
---|
| 1131 | * @param {Number} index The zero-based index of the list item to select |
---|
| 1132 | * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the |
---|
| 1133 | * selected item if it is not currently in view (defaults to true) |
---|
| 1134 | */ |
---|
| 1135 | select : function(index, scrollIntoView){ |
---|
| 1136 | this.selectedIndex = index; |
---|
| 1137 | this.view.select(index); |
---|
| 1138 | if(scrollIntoView !== false){ |
---|
| 1139 | var el = this.view.getNode(index); |
---|
| 1140 | if(el){ |
---|
| 1141 | this.innerList.scrollChildIntoView(el, false); |
---|
| 1142 | } |
---|
| 1143 | } |
---|
| 1144 | |
---|
| 1145 | }, |
---|
| 1146 | |
---|
| 1147 | // private |
---|
| 1148 | selectNext : function(){ |
---|
| 1149 | var ct = this.store.getCount(); |
---|
| 1150 | if(ct > 0){ |
---|
| 1151 | if(this.selectedIndex == -1){ |
---|
| 1152 | this.select(0); |
---|
| 1153 | }else if(this.selectedIndex < ct-1){ |
---|
| 1154 | this.select(this.selectedIndex+1); |
---|
| 1155 | } |
---|
| 1156 | } |
---|
| 1157 | }, |
---|
| 1158 | |
---|
| 1159 | // private |
---|
| 1160 | selectPrev : function(){ |
---|
| 1161 | var ct = this.store.getCount(); |
---|
| 1162 | if(ct > 0){ |
---|
| 1163 | if(this.selectedIndex == -1){ |
---|
| 1164 | this.select(0); |
---|
| 1165 | }else if(this.selectedIndex !== 0){ |
---|
| 1166 | this.select(this.selectedIndex-1); |
---|
| 1167 | } |
---|
| 1168 | } |
---|
| 1169 | }, |
---|
| 1170 | |
---|
| 1171 | // private |
---|
| 1172 | onKeyUp : function(e){ |
---|
| 1173 | var k = e.getKey(); |
---|
| 1174 | if(this.editable !== false && this.readOnly !== true && (k == e.BACKSPACE || !e.isSpecialKey())){ |
---|
| 1175 | |
---|
| 1176 | this.lastKey = k; |
---|
| 1177 | this.dqTask.delay(this.queryDelay); |
---|
| 1178 | } |
---|
| 1179 | Ext.form.ComboBox.superclass.onKeyUp.call(this, e); |
---|
| 1180 | }, |
---|
| 1181 | |
---|
| 1182 | // private |
---|
| 1183 | validateBlur : function(){ |
---|
| 1184 | return !this.list || !this.list.isVisible(); |
---|
| 1185 | }, |
---|
| 1186 | |
---|
| 1187 | // private |
---|
| 1188 | initQuery : function(){ |
---|
| 1189 | this.doQuery(this.getRawValue()); |
---|
| 1190 | }, |
---|
| 1191 | |
---|
| 1192 | // private |
---|
| 1193 | beforeBlur : function(){ |
---|
| 1194 | this.assertValue(); |
---|
| 1195 | }, |
---|
| 1196 | |
---|
| 1197 | // private |
---|
| 1198 | postBlur : function(){ |
---|
| 1199 | Ext.form.ComboBox.superclass.postBlur.call(this); |
---|
| 1200 | this.collapse(); |
---|
| 1201 | this.inKeyMode = false; |
---|
| 1202 | }, |
---|
| 1203 | |
---|
| 1204 | /** |
---|
| 1205 | * Execute a query to filter the dropdown list. Fires the {@link #beforequery} event prior to performing the |
---|
| 1206 | * query allowing the query action to be canceled if needed. |
---|
| 1207 | * @param {String} query The SQL query to execute |
---|
| 1208 | * @param {Boolean} forceAll <tt>true</tt> to force the query to execute even if there are currently fewer |
---|
| 1209 | * characters in the field than the minimum specified by the <tt>{@link #minChars}</tt> config option. It |
---|
| 1210 | * also clears any filter previously saved in the current store (defaults to <tt>false</tt>) |
---|
| 1211 | */ |
---|
| 1212 | doQuery : function(q, forceAll){ |
---|
| 1213 | q = Ext.isEmpty(q) ? '' : q; |
---|
| 1214 | var qe = { |
---|
| 1215 | query: q, |
---|
| 1216 | forceAll: forceAll, |
---|
| 1217 | combo: this, |
---|
| 1218 | cancel:false |
---|
| 1219 | }; |
---|
| 1220 | if(this.fireEvent('beforequery', qe)===false || qe.cancel){ |
---|
| 1221 | return false; |
---|
| 1222 | } |
---|
| 1223 | q = qe.query; |
---|
| 1224 | forceAll = qe.forceAll; |
---|
| 1225 | if(forceAll === true || (q.length >= this.minChars)){ |
---|
| 1226 | if(this.lastQuery !== q){ |
---|
| 1227 | this.lastQuery = q; |
---|
| 1228 | if(this.mode == 'local'){ |
---|
| 1229 | this.selectedIndex = -1; |
---|
| 1230 | if(forceAll){ |
---|
| 1231 | this.store.clearFilter(); |
---|
| 1232 | }else{ |
---|
| 1233 | this.store.filter(this.displayField, q); |
---|
| 1234 | } |
---|
| 1235 | this.onLoad(); |
---|
| 1236 | }else{ |
---|
| 1237 | this.store.baseParams[this.queryParam] = q; |
---|
| 1238 | this.store.load({ |
---|
| 1239 | params: this.getParams(q) |
---|
| 1240 | }); |
---|
| 1241 | this.expand(); |
---|
| 1242 | } |
---|
| 1243 | }else{ |
---|
| 1244 | this.selectedIndex = -1; |
---|
| 1245 | this.onLoad(); |
---|
| 1246 | } |
---|
| 1247 | } |
---|
| 1248 | }, |
---|
| 1249 | |
---|
| 1250 | // private |
---|
| 1251 | getParams : function(q){ |
---|
| 1252 | var params = {}, |
---|
| 1253 | paramNames = this.store.paramNames; |
---|
| 1254 | if(this.pageSize){ |
---|
| 1255 | params[paramNames.start] = 0; |
---|
| 1256 | params[paramNames.limit] = this.pageSize; |
---|
| 1257 | } |
---|
| 1258 | return params; |
---|
| 1259 | }, |
---|
| 1260 | |
---|
| 1261 | /** |
---|
| 1262 | * Hides the dropdown list if it is currently expanded. Fires the {@link #collapse} event on completion. |
---|
| 1263 | */ |
---|
| 1264 | collapse : function(){ |
---|
| 1265 | if(!this.isExpanded()){ |
---|
| 1266 | return; |
---|
| 1267 | } |
---|
| 1268 | this.list.hide(); |
---|
| 1269 | Ext.getDoc().un('mousewheel', this.collapseIf, this); |
---|
| 1270 | Ext.getDoc().un('mousedown', this.collapseIf, this); |
---|
| 1271 | this.fireEvent('collapse', this); |
---|
| 1272 | }, |
---|
| 1273 | |
---|
| 1274 | // private |
---|
| 1275 | collapseIf : function(e){ |
---|
| 1276 | if(!this.isDestroyed && !e.within(this.wrap) && !e.within(this.list)){ |
---|
| 1277 | this.collapse(); |
---|
| 1278 | } |
---|
| 1279 | }, |
---|
| 1280 | |
---|
| 1281 | /** |
---|
| 1282 | * Expands the dropdown list if it is currently hidden. Fires the {@link #expand} event on completion. |
---|
| 1283 | */ |
---|
| 1284 | expand : function(){ |
---|
| 1285 | if(this.isExpanded() || !this.hasFocus){ |
---|
| 1286 | return; |
---|
| 1287 | } |
---|
| 1288 | |
---|
| 1289 | if(this.title || this.pageSize){ |
---|
| 1290 | this.assetHeight = 0; |
---|
| 1291 | if(this.title){ |
---|
| 1292 | this.assetHeight += this.header.getHeight(); |
---|
| 1293 | } |
---|
| 1294 | if(this.pageSize){ |
---|
| 1295 | this.assetHeight += this.footer.getHeight(); |
---|
| 1296 | } |
---|
| 1297 | } |
---|
| 1298 | |
---|
| 1299 | if(this.bufferSize){ |
---|
| 1300 | this.doResize(this.bufferSize); |
---|
| 1301 | delete this.bufferSize; |
---|
| 1302 | } |
---|
| 1303 | this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign)); |
---|
| 1304 | |
---|
| 1305 | // zindex can change, re-check it and set it if necessary |
---|
| 1306 | this.list.setZIndex(this.getZIndex()); |
---|
| 1307 | this.list.show(); |
---|
| 1308 | if(Ext.isGecko2){ |
---|
| 1309 | this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac |
---|
| 1310 | } |
---|
| 1311 | this.mon(Ext.getDoc(), { |
---|
| 1312 | scope: this, |
---|
| 1313 | mousewheel: this.collapseIf, |
---|
| 1314 | mousedown: this.collapseIf |
---|
| 1315 | }); |
---|
| 1316 | this.fireEvent('expand', this); |
---|
| 1317 | }, |
---|
| 1318 | |
---|
| 1319 | /** |
---|
| 1320 | * @method onTriggerClick |
---|
| 1321 | * @hide |
---|
| 1322 | */ |
---|
| 1323 | // private |
---|
| 1324 | // Implements the default empty TriggerField.onTriggerClick function |
---|
| 1325 | onTriggerClick : function(){ |
---|
| 1326 | if(this.readOnly || this.disabled){ |
---|
| 1327 | return; |
---|
| 1328 | } |
---|
| 1329 | if(this.isExpanded()){ |
---|
| 1330 | this.collapse(); |
---|
| 1331 | this.el.focus(); |
---|
| 1332 | }else { |
---|
| 1333 | this.onFocus({}); |
---|
| 1334 | if(this.triggerAction == 'all') { |
---|
| 1335 | this.doQuery(this.allQuery, true); |
---|
| 1336 | } else { |
---|
| 1337 | this.doQuery(this.getRawValue()); |
---|
| 1338 | } |
---|
| 1339 | this.el.focus(); |
---|
| 1340 | } |
---|
| 1341 | } |
---|
| 1342 | |
---|
| 1343 | /** |
---|
| 1344 | * @hide |
---|
| 1345 | * @method autoSize |
---|
| 1346 | */ |
---|
| 1347 | /** |
---|
| 1348 | * @cfg {Boolean} grow @hide |
---|
| 1349 | */ |
---|
| 1350 | /** |
---|
| 1351 | * @cfg {Number} growMin @hide |
---|
| 1352 | */ |
---|
| 1353 | /** |
---|
| 1354 | * @cfg {Number} growMax @hide |
---|
| 1355 | */ |
---|
| 1356 | |
---|
| 1357 | }); |
---|
| 1358 | Ext.reg('combo', Ext.form.ComboBox); |
---|