src/widgets/form/Combo.js

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