src/widgets/form/Combo.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 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 &lt;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                   '&lt;tpl for=".">&lt;div class="x-combo-list-item">{' + this.displayField + '}&lt;/div>&lt;/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                   '&lt;tpl for=".">&lt;div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}&lt;/div>&lt;/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);