docs/source/Combo.html

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