/*
 * Ext JS Library 1.1 RC 1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */

/** * @class Ext.form.ComboBox * @extends Ext.form.TriggerField * A combobox control with support for autocomplete, remote-loading, paging and many other features. * @constructor * Create a new ComboBox. * @param {Object} config Configuration options */Ext.form.ComboBox = function(config){    Ext.form.ComboBox.superclass.constructor.call(this, config);    this.addEvents({        /**         * @event expand         * Fires when the dropdown list is expanded	     * @param {Ext.form.ComboBox} combo This combo box	     */        'expand' : true,        /**         * @event collapse         * Fires when the dropdown list is collapsed	     * @param {Ext.form.ComboBox} combo This combo box	     */        'collapse' : true,        /**         * @event beforeselect         * Fires before a list item is selected. Return false to cancel the selection.	     * @param {Ext.form.ComboBox} combo This combo box	     * @param {Ext.data.Record} record The data record returned from the underlying store	     * @param {Number} index The index of the selected item in the dropdown list	     */        'beforeselect' : true,        /**         * @event select         * Fires when a list item is selected	     * @param {Ext.form.ComboBox} combo This combo box	     * @param {Ext.data.Record} record The data record returned from the underlying store	     * @param {Number} index The index of the selected item in the dropdown list	     */        'select' : true,        /**         * @event beforequery         * Fires before all queries are processed. Return false to cancel the query or set cancel to true.         * The event object passed has these properties:	     * @param {Ext.form.ComboBox} combo This combo box	     * @param {String} query The query	     * @param {Boolean} forceAll true to force "all" query	     * @param {Boolean} cancel true to cancel the query	     * @param {Object} e The query event object	     */        'beforequery': true    });    if(this.transform){        this.allowDomMove = false;        var s = Ext.getDom(this.transform);        if(!this.hiddenName){            this.hiddenName = s.name;        }        if(!this.store){            this.mode = 'local';            var d = [], opts = s.options;            for(var i = 0, len = opts.length;i < len; i++){                var o = opts[i];                var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;                if(o.selected) {                    this.value = value;                }                d.push([value, o.text]);            }            this.store = new Ext.data.SimpleStore({                'id': 0,                fields: ['value', 'text'],                data : d            });            this.valueField = 'value';            this.displayField = 'text';        }        s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference        if(!this.lazyRender){            this.target = true;            this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);            s.parentNode.removeChild(s); // remove it            this.render(this.el.parentNode);        }else{            s.parentNode.removeChild(s); // remove it        }    }    this.selectedIndex = -1;    if(this.mode == 'local'){        if(config.queryDelay === undefined){            this.queryDelay = 10;        }        if(config.minChars === undefined){            this.minChars = 0;        }    }};Ext.extend(Ext.form.ComboBox, Ext.form.TriggerField, {    /**     * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox     */    /**     * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when     * rendering into an Ext.Editor, defaults to false)     */    /**     * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:     * {tag: "input", type: "text", size: "24", autocomplete: "off"})     */    // private    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},    /**     * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)     */    listWidth: undefined,    /**     * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if     * mode = 'remote' or 'text' if mode = 'local')     */    displayField: undefined,    /**     * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if     * mode = 'remote' or 'value' if mode = 'local')     */    valueField: undefined,    /**     * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the     * field's data value (defaults to the underlying DOM element's name)     */    hiddenName: undefined,    /**     * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')     */    listClass: '',    /**     * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')     */    selectedClass: 'x-combo-selected',    /**     * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'     * which displays a downward arrow icon).     */    triggerClass : 'x-form-arrow-trigger',    /**     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right     */    shadow:'sides',    /**     * @cfg {String} listAlign A valid anchor position value. See {@link Ext.Element#alignTo} for details on supported     * anchor positions (defaults to 'tl-bl')     */    listAlign: 'tl-bl?',    /**     * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)     */    maxHeight: 300,    /**     * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the     * query specified by the allQuery config option (defaults to 'query')     */    triggerAction: 'query',    /**     * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate     * (defaults to 4, does not apply if editable = false)     */    minChars : 4,    /**     * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable     * delay (typeAheadDelay) if it matches a known value (defaults to false)     */    typeAhead: false,    /**     * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the     * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')     */    queryDelay: 500,    /**     * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the     * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)     */    pageSize: 0,    /**     * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies     * when editable = true (defaults to false)     */    selectOnFocus:false,    /**     * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')     */    queryParam: 'query',    /**     * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies     * when mode = 'remote' (defaults to 'Loading...')     */    loadingText: 'Loading...',    /**     * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)     */    resizable: false,    /**     * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)     */    handleHeight : 8,    /**     * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a     * traditional select (defaults to true)     */    editable: true,    /**     * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')     */    allQuery: '',    /**     * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)     */    mode: 'remote',    /**     * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if     * listWidth has a higher value)     */    minListWidth : 70,    /**     * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to     * allow the user to set arbitrary text into the field (defaults to false)     */    forceSelection:false,    /**     * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed     * if typeAhead = true (defaults to 250)     */    typeAheadDelay : 250,    /**     * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in     * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)     */    valueNotFoundText : undefined,    // private    onRender : function(ct, position){        Ext.form.ComboBox.superclass.onRender.call(this, ct, position);        if(this.hiddenName){            this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},                    'before', true);            this.hiddenField.value =                this.hiddenValue !== undefined ? this.hiddenValue :                this.value !== undefined ? this.value : '';            // prevent input submission            this.el.dom.removeAttribute('name');        }        if(Ext.isGecko){            this.el.dom.setAttribute('autocomplete', 'off');        }        var cls = 'x-combo-list';        this.list = new Ext.Layer({            shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false        });        var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);        this.list.setWidth(lw);        this.list.swallowEvent('mousewheel');        this.assetHeight = 0;        if(this.title){            this.header = this.list.createChild({cls:cls+'-hd', html: this.title});            this.assetHeight += this.header.getHeight();        }        this.innerList = this.list.createChild({cls:cls+'-inner'});        this.innerList.on('mouseover', this.onViewOver, this);        this.innerList.on('mousemove', this.onViewMove, this);        this.innerList.setWidth(lw - this.list.getFrameWidth('lr'))        if(this.pageSize){            this.footer = this.list.createChild({cls:cls+'-ft'});            this.pageTb = new Ext.PagingToolbar(this.footer, this.store,                    {pageSize: this.pageSize});            this.assetHeight += this.footer.getHeight();        }        if(!this.tpl){            this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';        }        this.view = new Ext.View(this.innerList, this.tpl, {            singleSelect:true, store: this.store, selectedClass: this.selectedClass        });        this.view.on('click', this.onViewClick, this);        this.store.on('beforeload', this.onBeforeLoad, this);        this.store.on('load', this.onLoad, this);        this.store.on('loadexception', this.collapse, this);        if(this.resizable){            this.resizer = new Ext.Resizable(this.list,  {               pinned:true, handles:'se'            });            this.resizer.on('resize', function(r, w, h){                this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;                this.listWidth = w;                this.innerList.setWidth(w - this.list.getFrameWidth('lr'));                this.restrictHeight();            }, this);            this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');        }        if(!this.editable){            this.editable = true;            this.setEditable(false);        }    },    // private    initEvents : function(){        Ext.form.ComboBox.superclass.initEvents.call(this);        this.keyNav = new Ext.KeyNav(this.el, {            "up" : function(e){                this.inKeyMode = true;                this.selectPrev();            },            "down" : function(e){                if(!this.isExpanded()){                    this.onTriggerClick();                }else{                    this.inKeyMode = true;                    this.selectNext();                }            },            "enter" : function(e){                this.onViewClick();                //return true;            },            "esc" : function(e){                this.collapse();            },            "tab" : function(e){                this.onViewClick(false);                return true;            },            scope : this,            doRelay : function(foo, bar, hname){                if(hname == 'down' || this.scope.isExpanded()){                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);                }                return true;            }        });        this.queryDelay = Math.max(this.queryDelay || 10,                this.mode == 'local' ? 10 : 250);        this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);        if(this.typeAhead){            this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);        }        if(this.editable !== false){            this.el.on("keyup", this.onKeyUp, this);        }        if(this.forceSelection){            this.on('blur', this.doForce, this);        }    },    onDestroy : function(){        if(this.view){            this.view.setStore(null);            this.view.el.removeAllListeners();            this.view.el.remove();            this.view.purgeListeners();        }        if(this.list){            this.list.destroy();        }        if(this.store){            this.store.un('beforeload', this.onBeforeLoad, this);            this.store.un('load', this.onLoad, this);            this.store.un('loadexception', this.collapse, this);        }        Ext.form.ComboBox.superclass.onDestroy.call(this);    },    // private    fireKey : function(e){        if(e.isNavKeyPress() && !this.list.isVisible()){            this.fireEvent("specialkey", this, e);        }    },    // private    onResize: function(w, h){        Ext.form.ComboBox.superclass.onResize.apply(this, arguments);        if(this.list && this.listWidth === undefined){            var lw = Math.max(w, this.minListWidth);            this.list.setWidth(lw);