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