git.roojs.org Git - roojs1/blob - Roo/form/ComboCheck.js

   1 /*
   2  * RooJS Library 1.1.1
   3  * Copyright(c) 2008-2011  Alan Knowles
   4  *
   5  * License - LGPL
   6  */
   7
   8
   9 /**
  10  * @class Roo.form.ComboCheck
  11  * @extends Roo.form.ComboBox
  12  * A combobox for multiple select items.
  13  * @constructor
  14  * Create a new ComboCheck
  15  * @param {Object} config Configuration options
  16  */
  17 Roo.form.ComboCheck = function(config){
  18     Roo.form.ComboCheck.superclass.constructor.call(this, config);
  19
  20 };
  21
  22 Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
  23     /**
  24      * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
  25      */
  26     /**
  27      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
  28      * rendering into an Roo.Editor, defaults to false)
  29      */
  30     /**
  31      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
  32      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
  33      */
  34     /**
  35      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
  36      */
  37     /**
  38      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
  39      * the dropdown list (defaults to undefined, with no header element)
  40      */
  41
  42      /**
  43      * @cfg {String/Roo.Template} tpl The template to use to render the output
  44      */
  45
  46     // private
  47     defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
  48     /**
  49      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
  50      */
  51     listWidth: undefined,
  52     /**
  53      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
  54      * mode = 'remote' or 'text' if mode = 'local')
  55      */
  56     displayField: undefined,
  57     /**
  58      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
  59      * mode = 'remote' or 'value' if mode = 'local').
  60      * Note: use of a valueField requires the user make a selection
  61      * in order for a value to be mapped.
  62      */
  63     valueField: undefined,
  64     /**
  65      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
  66      * field's data value (defaults to the underlying DOM element's name)
  67      */
  68     hiddenName: undefined,
  69     /**
  70      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
  71      */
  72     listClass: '',
  73     /**
  74      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
  75      */
  76     selectedClass: 'x-combo-selected',
  77     /**
  78      * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
  79      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
  80      * which displays a downward arrow icon).
  81      */
  82     triggerClass : 'x-form-arrow-trigger',
  83     /**
  84      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
  85      */
  86     shadow:'sides',
  87     /**
  88      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
  89      * anchor positions (defaults to 'tl-bl')
  90      */
  91     listAlign: 'tl-bl?',
  92     /**
  93      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
  94      */
  95     maxHeight: 300,
  96     /**
  97      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
  98      * query specified by the allQuery config option (defaults to 'query')
  99      */
 100     triggerAction: 'query',
 101     /**
 102      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
 103      * (defaults to 4, does not apply if editable = false)
 104      */
 105     minChars : 4,
 106     /**
 107      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
 108      * delay (typeAheadDelay) if it matches a known value (defaults to false)
 109      */
 110     typeAhead: false,
 111     /**
 112      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
 113      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
 114      */
 115     queryDelay: 500,
 116     /**
 117      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
 118      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
 119      */
 120     pageSize: 0,
 121     /**
 122      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
 123      * when editable = true (defaults to false)
 124      */
 125     selectOnFocus:false,
 126     /**
 127      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
 128      */
 129     queryParam: 'query',
 130     /**
 131      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
 132      * when mode = 'remote' (defaults to 'Loading...')
 133      */
 134     loadingText: 'Loading...',
 135     /**
 136      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
 137      */
 138     resizable: false,
 139     /**
 140      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
 141      */
 142     handleHeight : 8,
 143     /**
 144      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
 145      * traditional select (defaults to true)
 146      */
 147     editable: true,
 148     /**
 149      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
 150      */
 151     allQuery: '',
 152     /**
 153      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
 154      */
 155     mode: 'remote',
 156     /**
 157      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
 158      * listWidth has a higher value)
 159      */
 160     minListWidth : 70,
 161     /**
 162      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
 163      * allow the user to set arbitrary text into the field (defaults to false)
 164      */
 165     forceSelection:false,
 166     /**
 167      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
 168      * if typeAhead = true (defaults to 250)
 169      */
 170     typeAheadDelay : 250,
 171     /**
 172      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
 173      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
 174      */
 175     valueNotFoundText : undefined,
 176     /**
 177      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
 178      */
 179     blockFocus : false,
 180
 181     /**
 182      * @cfg {Boolean} disableClear Disable showing of clear button.
 183      */
 184     disableClear : false,
 185     /**
 186      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
 187      */
 188     alwaysQuery : false,
 189
 190     //private
 191     addicon : false,
 192     editicon: false,
 193
 194
 195     // private
 196     onRender : function(ct, position){
 197         Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
 198         if(this.hiddenName){
 199             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
 200                     'before', true);
 201             this.hiddenField.value =
 202                 this.hiddenValue !== undefined ? this.hiddenValue :
 203                 this.value !== undefined ? this.value : '';
 204
 205             // prevent input submission
 206             this.el.dom.removeAttribute('name');
 207         }
 208         if(Roo.isGecko){
 209             this.el.dom.setAttribute('autocomplete', 'off');
 210         }
 211
 212         var cls = 'x-combo-list';
 213
 214         this.list = new Roo.Layer({
 215             shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
 216         });
 217
 218         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
 219         this.list.setWidth(lw);
 220         this.list.swallowEvent('mousewheel');
 221         this.assetHeight = 0;
 222
 223         if(this.title){
 224             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
 225             this.assetHeight += this.header.getHeight();
 226         }
 227
 228         this.innerList = this.list.createChild({cls:cls+'-inner'});
 229         this.innerList.on('mouseover', this.onViewOver, this);
 230         this.innerList.on('mousemove', this.onViewMove, this);
 231         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
 232
 233         if(this.allowBlank && !this.pageSize && !this.disableClear){
 234             this.footer = this.list.createChild({cls:cls+'-ft'});
 235             this.pageTb = new Roo.Toolbar(this.footer);
 236
 237         }
 238         if(this.pageSize){
 239             this.footer = this.list.createChild({cls:cls+'-ft'});
 240             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
 241                     {pageSize: this.pageSize});
 242
 243         }
 244
 245         if (this.pageTb && this.allowBlank && !this.disableClear) {
 246             var _this = this;
 247             this.pageTb.add(new Roo.Toolbar.Fill(), {
 248                 cls: 'x-btn-icon x-btn-clear',
 249                 text: '&#160;',
 250                 handler: function()
 251                 {
 252                     _this.collapse();
 253                     _this.clearValue();
 254                     _this.onSelect(false, -1);
 255                 }
 256             });
 257         }
 258         if (this.footer) {
 259             this.assetHeight += this.footer.getHeight();
 260         }
 261
 262
 263         if(!this.tpl){
 264             this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
 265         }
 266
 267         this.view = new Roo.View(this.innerList, this.tpl, {
 268             singleSelect:true, store: this.store, selectedClass: this.selectedClass
 269         });
 270
 271         this.view.on('click', this.onViewClick, this);
 272
 273         this.store.on('beforeload', this.onBeforeLoad, this);
 274         this.store.on('load', this.onLoad, this);
 275         this.store.on('loadexception', this.collapse, this);
 276
 277         if(this.resizable){
 278             this.resizer = new Roo.Resizable(this.list,  {
 279                pinned:true, handles:'se'
 280             });
 281             this.resizer.on('resize', function(r, w, h){
 282                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
 283                 this.listWidth = w;
 284                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
 285                 this.restrictHeight();
 286             }, this);
 287             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
 288         }
 289         if(!this.editable){
 290             this.editable = true;
 291             this.setEditable(false);
 292         }
 293
 294
 295         if (typeof(this.events.add.listeners) != 'undefined') {
 296
 297             this.addicon = this.wrap.createChild(
 298                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });
 299
 300             this.addicon.on('click', function(e) {
 301                 this.fireEvent('add', this);
 302             }, this);
 303         }
 304         if (typeof(this.events.edit.listeners) != 'undefined') {
 305
 306             this.editicon = this.wrap.createChild(
 307                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });
 308             if (this.addicon) {
 309                 this.editicon.setStyle('margin-left', '40px');
 310             }
 311             this.editicon.on('click', function(e) {
 312
 313                 // we fire even  if inothing is selected..
 314                 this.fireEvent('edit', this, this.lastData );
 315
 316             }, this);
 317         }
 318
 319
 320
 321     },
 322
 323     // private
 324     initEvents : function(){
 325         Roo.form.ComboBox.superclass.initEvents.call(this);
 326
 327         this.keyNav = new Roo.KeyNav(this.el, {
 328             "up" : function(e){
 329                 this.inKeyMode = true;
 330                 this.selectPrev();
 331             },
 332
 333             "down" : function(e){
 334                 if(!this.isExpanded()){
 335                     this.onTriggerClick();
 336                 }else{
 337                     this.inKeyMode = true;
 338                     this.selectNext();
 339                 }
 340             },
 341
 342             "enter" : function(e){
 343                 this.onViewClick();
 344                 //return true;
 345             },
 346
 347             "esc" : function(e){
 348                 this.collapse();
 349             },
 350
 351             "tab" : function(e){
 352                 this.onViewClick(false);
 353                 return true;
 354             },
 355
 356             scope : this,
 357
 358             doRelay : function(foo, bar, hname){
 359                 if(hname == 'down' || this.scope.isExpanded()){
 360                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
 361                 }
 362                 return true;
 363             },
 364
 365             forceKeyDown: true
 366         });
 367         this.queryDelay = Math.max(this.queryDelay || 10,
 368                 this.mode == 'local' ? 10 : 250);
 369         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
 370         if(this.typeAhead){
 371             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
 372         }
 373         if(this.editable !== false){
 374             this.el.on("keyup", this.onKeyUp, this);
 375         }
 376         if(this.forceSelection){
 377             this.on('blur', this.doForce, this);
 378         }
 379     },
 380
 381     onDestroy : function(){
 382         if(this.view){
 383             this.view.setStore(null);
 384             this.view.el.removeAllListeners();
 385             this.view.el.remove();
 386             this.view.purgeListeners();
 387         }
 388         if(this.list){
 389             this.list.destroy();
 390         }
 391         if(this.store){
 392             this.store.un('beforeload', this.onBeforeLoad, this);
 393             this.store.un('load', this.onLoad, this);
 394             this.store.un('loadexception', this.collapse, this);
 395         }
 396         Roo.form.ComboBox.superclass.onDestroy.call(this);
 397     },
 398
 399     // private
 400     fireKey : function(e){
 401         if(e.isNavKeyPress() && !this.list.isVisible()){
 402             this.fireEvent("specialkey", this, e);
 403         }
 404     },
 405
 406     // private
 407     onResize: function(w, h){
 408         Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
 409
 410         if(typeof w != 'number'){
 411             // we do not handle it!?!?
 412             return;
 413         }
 414         var tw = this.trigger.getWidth();
 415         tw += this.addicon ? this.addicon.getWidth() : 0;
 416         tw += this.editicon ? this.editicon.getWidth() : 0;
 417         var x = w - tw;
 418         this.el.setWidth( this.adjustWidth('input', x));
 419
 420         this.trigger.setStyle('left', x+'px');
 421
 422         if(this.list && this.listWidth === undefined){
 423             var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
 424             this.list.setWidth(lw);
 425             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
 426         }
 427
 428
 429
 430     },
 431
 432     /**
 433      * Allow or prevent the user from directly editing the field text.  If false is passed,
 434      * the user will only be able to select from the items defined in the dropdown list.  This method
 435      * is the runtime equivalent of setting the 'editable' config option at config time.
 436      * @param {Boolean} value True to allow the user to directly edit the field text
 437      */
 438     setEditable : function(value){
 439         if(value == this.editable){
 440             return;
 441         }
 442         this.editable = value;
 443         if(!value){
 444             this.el.dom.setAttribute('readOnly', true);
 445             this.el.on('mousedown', this.onTriggerClick,  this);
 446             this.el.addClass('x-combo-noedit');
 447         }else{
 448             this.el.dom.setAttribute('readOnly', false);
 449             this.el.un('mousedown', this.onTriggerClick,  this);
 450             this.el.removeClass('x-combo-noedit');
 451         }
 452     },
 453
 454     // private
 455     onBeforeLoad : function(){
 456         if(!this.hasFocus){
 457             return;
 458         }
 459         this.innerList.update(this.loadingText ?
 460                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
 461         this.restrictHeight();
 462         this.selectedIndex = -1;
 463     },
 464
 465     // private
 466     onLoad : function(){
 467         if(!this.hasFocus){
 468             return;
 469         }
 470         if(this.store.getCount() > 0){
 471             this.expand();
 472             this.restrictHeight();
 473             if(this.lastQuery == this.allQuery){
 474                 if(this.editable){
 475                     this.el.dom.select();
 476                 }
 477                 if(!this.selectByValue(this.value, true)){
 478                     this.select(0, true);
 479                 }
 480             }else{
 481                 this.selectNext();
 482                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
 483                     this.taTask.delay(this.typeAheadDelay);
 484                 }
 485             }
 486         }else{
 487             this.onEmptyResults();
 488         }
 489         //this.el.focus();
 490     },
 491
 492     // private
 493     onTypeAhead : function(){
 494         if(this.store.getCount() > 0){
 495             var r = this.store.getAt(0);
 496             var newValue = r.data[this.displayField];
 497             var len = newValue.length;
 498             var selStart = this.getRawValue().length;
 499             if(selStart != len){
 500                 this.setRawValue(newValue);
 501                 this.selectText(selStart, newValue.length);
 502             }
 503         }
 504     },
 505
 506     // private
 507     onSelect : function(record, index){
 508         if(this.fireEvent('beforeselect', this, record, index) !== false){
 509             this.setFromData(index > -1 ? record.data : false);
 510             this.collapse();
 511             this.fireEvent('select', this, record, index);
 512         }
 513     },
 514
 515     /**
 516      * Returns the currently selected field value or empty string if no value is set.
 517      * @return {String} value The selected value
 518      */
 519     getValue : function(){
 520         if(this.valueField){
 521             return typeof this.value != 'undefined' ? this.value : '';
 522         }else{
 523             return Roo.form.ComboBox.superclass.getValue.call(this);
 524         }
 525     },
 526
 527     /**
 528      * Clears any text/value currently set in the field
 529      */
 530     clearValue : function(){
 531         if(this.hiddenField){
 532             this.hiddenField.value = '';
 533         }
 534         this.value = '';
 535         this.setRawValue('');
 536         this.lastSelectionText = '';
 537         this.applyEmptyText();
 538     },
 539
 540     /**
 541      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
 542      * will be displayed in the field.  If the value does not match the data value of an existing item,
 543      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
 544      * Otherwise the field will be blank (although the value will still be set).
 545      * @param {String} value The value to match
 546      */
 547     setValue : function(v){
 548         var text = v;
 549         if(this.valueField){
 550             var r = this.findRecord(this.valueField, v);
 551             if(r){
 552                 text = r.data[this.displayField];
 553             }else if(this.valueNotFoundText !== undefined){
 554                 text = this.valueNotFoundText;
 555             }
 556         }
 557         this.lastSelectionText = text;
 558         if(this.hiddenField){
 559             this.hiddenField.value = v;
 560         }
 561         Roo.form.ComboBox.superclass.setValue.call(this, text);
 562         this.value = v;
 563     },
 564     /**
 565      * @property {Object} the last set data for the element
 566      */
 567
 568     lastData : false,
 569     /**
 570      * Sets the value of the field based on a object which is related to the record format for the store.
 571      * @param {Object} value the value to set as. or false on reset?
 572      */
 573     setFromData : function(o){
 574         var dv = ''; // display value
 575         var vv = ''; // value value..
 576         this.lastData = o;
 577         if (this.displayField) {
 578             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
 579         } else {
 580             // this is an error condition!!!
 581             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
 582         }
 583
 584         if(this.valueField){
 585             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
 586         }
 587         if(this.hiddenField){
 588             this.hiddenField.value = vv;
 589
 590             this.lastSelectionText = dv;
 591             Roo.form.ComboBox.superclass.setValue.call(this, dv);
 592             this.value = vv;
 593             return;
 594         }
 595         // no hidden field.. - we store the value in 'value', but still display
 596         // display field!!!!
 597         this.lastSelectionText = dv;
 598         Roo.form.ComboBox.superclass.setValue.call(this, dv);
 599         this.value = vv;
 600
 601
 602     },
 603     // private
 604     reset : function(){
 605         // overridden so that last data is reset..
 606         this.setValue(this.originalValue);
 607         this.clearInvalid();
 608         this.lastData = false;
 609     },
 610     // private
 611     findRecord : function(prop, value){
 612         var record;
 613         if(this.store.getCount() > 0){
 614             this.store.each(function(r){
 615                 if(r.data[prop] == value){
 616                     record = r;
 617                     return false;
 618                 }
 619             });
 620         }
 621         return record;
 622     },
 623
 624     // private
 625     onViewMove : function(e, t){
 626         this.inKeyMode = false;
 627     },
 628
 629     // private
 630     onViewOver : function(e, t){
 631         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
 632             return;
 633         }
 634         var item = this.view.findItemFromChild(t);
 635         if(item){
 636             var index = this.view.indexOf(item);
 637             this.select(index, false);
 638         }
 639     },
 640
 641     // private
 642     onViewClick : function(doFocus){
 643         var index = this.view.getSelectedIndexes()[0];
 644         var r = this.store.getAt(index);
 645         if(r){
 646             this.onSelect(r, index);
 647         }
 648         if(doFocus !== false && !this.blockFocus){
 649             this.el.focus();
 650         }
 651     },
 652
 653     // private
 654     restrictHeight : function(){
 655         this.innerList.dom.style.height = '';
 656         var inner = this.innerList.dom;
 657         var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
 658         this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
 659         this.list.beginUpdate();
 660         this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
 661         this.list.alignTo(this.el, this.listAlign);
 662         this.list.endUpdate();
 663     },
 664
 665     // private
 666     onEmptyResults : function(){
 667         this.collapse();
 668     },
 669
 670     /**
 671      * Returns true if the dropdown list is expanded, else false.
 672      */
 673     isExpanded : function(){
 674         return this.list.isVisible();
 675     },
 676
 677     /**
 678      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
 679      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
 680      * @param {String} value The data value of the item to select
 681      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
 682      * selected item if it is not currently in view (defaults to true)
 683      * @return {Boolean} True if the value matched an item in the list, else false
 684      */
 685     selectByValue : function(v, scrollIntoView){
 686         if(v !== undefined && v !== null){
 687             var r = this.findRecord(this.valueField || this.displayField, v);
 688             if(r){
 689                 this.select(this.store.indexOf(r), scrollIntoView);
 690                 return true;
 691             }
 692         }
 693         return false;
 694     },
 695
 696     /**
 697      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
 698      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
 699      * @param {Number} index The zero-based index of the list item to select
 700      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
 701      * selected item if it is not currently in view (defaults to true)
 702      */
 703     select : function(index, scrollIntoView){
 704         this.selectedIndex = index;
 705         this.view.select(index);
 706         if(scrollIntoView !== false){
 707             var el = this.view.getNode(index);
 708             if(el){
 709                 this.innerList.scrollChildIntoView(el, false);
 710             }
 711         }
 712     },
 713
 714     // private
 715     selectNext : function(){
 716         var ct = this.store.getCount();
 717         if(ct > 0){
 718             if(this.selectedIndex == -1){
 719                 this.select(0);
 720             }else if(this.selectedIndex < ct-1){
 721                 this.select(this.selectedIndex+1);
 722             }
 723         }
 724     },
 725
 726     // private
 727     selectPrev : function(){
 728         var ct = this.store.getCount();
 729         if(ct > 0){
 730             if(this.selectedIndex == -1){
 731                 this.select(0);
 732             }else if(this.selectedIndex != 0){
 733                 this.select(this.selectedIndex-1);
 734             }
 735         }
 736     },
 737
 738     // private
 739     onKeyUp : function(e){
 740         if(this.editable !== false && !e.isSpecialKey()){
 741             this.lastKey = e.getKey();
 742             this.dqTask.delay(this.queryDelay);
 743         }
 744     },
 745
 746     // private
 747     validateBlur : function(){
 748         return !this.list || !this.list.isVisible();
 749     },
 750
 751     // private
 752     initQuery : function(){
 753         this.doQuery(this.getRawValue());
 754     },
 755
 756     // private
 757     doForce : function(){
 758         if(this.el.dom.value.length > 0){
 759             this.el.dom.value =
 760                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
 761             this.applyEmptyText();
 762         }
 763     },
 764
 765     /**
 766      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
 767      * query allowing the query action to be canceled if needed.
 768      * @param {String} query The SQL query to execute
 769      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
 770      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
 771      * saved in the current store (defaults to false)
 772      */
 773     doQuery : function(q, forceAll){
 774         if(q === undefined || q === null){
 775             q = '';
 776         }
 777         var qe = {
 778             query: q,
 779             forceAll: forceAll,
 780             combo: this,
 781             cancel:false
 782         };
 783         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
 784             return false;
 785         }
 786         q = qe.query;
 787         forceAll = qe.forceAll;
 788         if(forceAll === true || (q.length >= this.minChars)){
 789             if(this.lastQuery != q || this.alwaysQuery){
 790                 this.lastQuery = q;
 791                 if(this.mode == 'local'){
 792                     this.selectedIndex = -1;
 793                     if(forceAll){
 794                         this.store.clearFilter();
 795                     }else{
 796                         this.store.filter(this.displayField, q);
 797                     }
 798                     this.onLoad();
 799                 }else{
 800                     this.store.baseParams[this.queryParam] = q;
 801                     this.store.load({
 802                         params: this.getParams(q)
 803                     });
 804                     this.expand();
 805                 }
 806             }else{
 807                 this.selectedIndex = -1;
 808                 this.onLoad();
 809             }
 810         }
 811     },
 812
 813     // private
 814     getParams : function(q){
 815         var p = {};
 816         //p[this.queryParam] = q;
 817         if(this.pageSize){
 818             p.start = 0;
 819             p.limit = this.pageSize;
 820         }
 821         return p;
 822     },
 823
 824     /**
 825      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
 826      */
 827     collapse : function(){
 828         if(!this.isExpanded()){
 829             return;
 830         }
 831         this.list.hide();
 832         Roo.get(document).un('mousedown', this.collapseIf, this);
 833         Roo.get(document).un('mousewheel', this.collapseIf, this);
 834         if (!this.editable) {
 835             Roo.get(document).un('keydown', this.listKeyPress, this);
 836         }
 837         this.fireEvent('collapse', this);
 838     },
 839
 840     // private
 841     collapseIf : function(e){
 842         if(!e.within(this.wrap) && !e.within(this.list)){
 843             this.collapse();
 844         }
 845     },
 846
 847     /**
 848      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
 849      */
 850     expand : function(){
 851         if(this.isExpanded() || !this.hasFocus){
 852             return;
 853         }
 854         this.list.alignTo(this.el, this.listAlign);
 855         this.list.show();
 856         Roo.get(document).on('mousedown', this.collapseIf, this);
 857         Roo.get(document).on('mousewheel', this.collapseIf, this);
 858         if (!this.editable) {
 859             Roo.get(document).on('keydown', this.listKeyPress, this);
 860         }
 861
 862         this.fireEvent('expand', this);
 863     },
 864
 865     // private
 866     // Implements the default empty TriggerField.onTriggerClick function
 867     onTriggerClick : function(){
 868         if(this.disabled){
 869             return;
 870         }
 871         if(this.isExpanded()){
 872             this.collapse();
 873             if (!this.blockFocus) {
 874                 this.el.focus();
 875             }
 876
 877         }else {
 878             this.hasFocus = true;
 879             if(this.triggerAction == 'all') {
 880                 this.doQuery(this.allQuery, true);
 881             } else {
 882                 this.doQuery(this.getRawValue());
 883             }
 884             if (!this.blockFocus) {
 885                 this.el.focus();
 886             }
 887         }
 888     },
 889     listKeyPress : function(e)
 890     {
 891         //Roo.log('listkeypress');
 892         // scroll to first matching element based on key pres..
 893         if (e.isSpecialKey()) {
 894             return false;
 895         }
 896         var k = String.fromCharCode(e.getKey()).toUpperCase();
 897         //Roo.log(k);
 898         var match  = false;
 899         var csel = this.view.getSelectedNodes();
 900         var cselitem = false;
 901         if (csel.length) {
 902             var ix = this.view.indexOf(csel[0]);
 903             cselitem  = this.store.getAt(ix);
 904             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
 905                 cselitem = false;
 906             }
 907
 908         }
 909
 910         this.store.each(function(v) {
 911             if (cselitem) {
 912                 // start at existing selection.
 913                 if (cselitem.id == v.id) {
 914                     cselitem = false;
 915                 }
 916                 return;
 917             }
 918
 919             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
 920                 match = this.store.indexOf(v);
 921                 return false;
 922             }
 923         }, this);
 924
 925         if (match === false) {
 926             return true; // no more action?
 927         }
 928         // scroll to?
 929         this.view.select(match);
 930         var sn = Roo.get(this.view.getSelectedNodes()[0])
 931         sn.scrollIntoView(sn.dom.parentNode, false);
 932     }
 933
 934     /**
 935     * @cfg {Boolean} grow
 936     * @hide
 937     */
 938     /**
 939     * @cfg {Number} growMin
 940     * @hide
 941     */
 942     /**
 943     * @cfg {Number} growMax
 944     * @hide
 945     */
 946     /**
 947      * @hide
 948      * @method autoSize
 949      */
 950 });