docs/source/Combo.html

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