/** + + + ++ \ No newline at end of fileThe source code + + + + +/*! + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +/** * @class Ext.form.ComboBox * @extends Ext.form.TriggerField *- +A combobox control with support for autocomplete, remote-loading, paging and many other features.
@@ -148,16 +154,11 @@ Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, { * @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). Required for the combo's value to automatically * post during a form submission. See also {@link #valueField}. - *Note: the hidden field's id will also default to this name if {@link #hiddenId} is not specified. - * The ComboBox {@link Ext.Component#id id} and the {@link #hiddenId} should be different, since - * no two DOM nodes should share the same id. So, if the ComboBox {@link Ext.form.Field#name name} and - * hiddenName are the same, you should specify a unique {@link #hiddenId}.
*/ /** * @cfg {String} hiddenId If {@link #hiddenName} is specified, hiddenId can also be provided - * to give the hidden field a unique id (defaults to the {@link #hiddenName}). The hiddenId - * and combo {@link Ext.Component#id id} should be different, since no two DOM - * nodes should share the same id. + * to give the hidden field a unique id. The hiddenId and combo {@link Ext.Component#id id} should be + * different, since no two DOM nodes should share the same id. */ /** * @cfg {String} hiddenValue Sets the initial value of the hidden field if {@link #hiddenName} is @@ -446,7 +447,7 @@ var combo = new Ext.form.ComboBox({ d.push([value, o.text]); } this.store = new Ext.data.ArrayStore({ - 'id': 0, + idIndex: 0, fields: ['value', 'text'], data : d, autoDestroy: true @@ -493,7 +494,7 @@ var combo = new Ext.form.ComboBox({ 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); + id: (this.hiddenId || Ext.id())}, 'before', true); } if(Ext.isGecko){ @@ -516,26 +517,38 @@ var combo = new Ext.form.ComboBox({ } }, + getParentZIndex : function(){ + var zindex; + if (this.ownerCt){ + this.findParentBy(function(ct){ + zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10); + return !!zindex; + }); + } + return zindex; + }, + + getZIndex : function(listParent){ + listParent = listParent || Ext.getDom(this.getListParent() || Ext.getBody()); + var zindex = parseInt(Ext.fly(listParent).getStyle('z-index'), 10); + if(!zindex){ + zindex = this.getParentZIndex(); + } + return (zindex || 12000) + 5; + }, + // private initList : function(){ if(!this.list){ var cls = 'x-combo-list', - listParent = Ext.getDom(this.getListParent() || Ext.getBody()), - zindex = parseInt(Ext.fly(listParent).getStyle('z-index') ,10); - - if (this.ownerCt && !zindex){ - this.findParentBy(function(ct){ - zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10); - return !!zindex; - }); - } + listParent = Ext.getDom(this.getListParent() || Ext.getBody()); this.list = new Ext.Layer({ parentEl: listParent, shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false, - zindex: (zindex || 12000) + 5 + zindex: this.getZIndex(listParent) }); var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth); @@ -727,17 +740,33 @@ var menu = new Ext.menu.Menu({ }, reset : function(){ - Ext.form.ComboBox.superclass.reset.call(this); if(this.clearFilterOnReset && this.mode == 'local'){ this.store.clearFilter(); } + Ext.form.ComboBox.superclass.reset.call(this); }, // private initEvents : function(){ Ext.form.ComboBox.superclass.initEvents.call(this); - + /** + * @property keyNav + * @type Ext.KeyNav + *A {@link Ext.KeyNav KeyNav} object which handles navigation keys for this ComboBox. This performs actions + * based on keystrokes typed when the input field is focused.
+ *After the ComboBox has been rendered, you may override existing navigation key functionality, + * or add your own based upon key names as specified in the {@link Ext.KeyNav KeyNav} class.
+ *The function is executed in the scope (
thisreference of the ComboBox. Example:+ */ this.keyNav = new Ext.KeyNav(this.el, { "up" : function(e){ this.inKeyMode = true; @@ -762,7 +791,11 @@ var menu = new Ext.menu.Menu({ }, "tab" : function(e){ - this.collapse(); + if (this.forceSelection === true) { + this.collapse(); + } else { + this.onViewClick(false); + } return true; }, @@ -823,7 +856,7 @@ var menu = new Ext.menu.Menu({ // private onResize : function(w, h){ Ext.form.ComboBox.superclass.onResize.apply(this, arguments); - if(this.isVisible() && this.list){ + if(!isNaN(w) && this.isVisible() && this.list){ this.doResize(w); }else{ this.bufferSize = w; @@ -910,11 +943,16 @@ var menu = new Ext.menu.Menu({ }, // private - assertValue : function(){ - + assertValue : function(){ var val = this.getRawValue(), - rec = this.findRecord(this.displayField, val); + rec; + if(this.valueField && Ext.isDefined(this.value)){ + rec = this.findRecord(this.valueField, this.value); + } + if(!rec || rec.get(this.displayField) != val){ + rec = this.findRecord(this.displayField, val); + } if(!rec && this.forceSelection){ if(val.length > 0 && val != this.emptyText){ this.el.dom.value = Ext.value(this.lastSelectionText, ''); @@ -923,12 +961,17 @@ var menu = new Ext.menu.Menu({ this.clearValue(); } }else{ - if(rec){ + if(rec && this.valueField){ + // onSelect may have already set the value and by doing so + // set the display field properly. Let's not wipe out the + // valueField here by just sending the displayField. + if (this.value == val){ + return; + } val = rec.get(this.valueField || this.displayField); } this.setValue(val); } - }, // private @@ -1214,13 +1257,13 @@ var menu = new Ext.menu.Menu({ // private getParams : function(q){ - var p = {}; - //p[this.queryParam] = q; + var params = {}, + paramNames = this.store.paramNames; if(this.pageSize){ - p.start = 0; - p.limit = this.pageSize; + params[paramNames.start] = 0; + params[paramNames.limit] = this.pageSize; } - return p; + return params; }, /** @@ -1238,7 +1281,7 @@ var menu = new Ext.menu.Menu({ // private collapseIf : function(e){ - if(!e.within(this.wrap) && !e.within(this.list)){ + if(!this.isDestroyed && !e.within(this.wrap) && !e.within(this.list)){ this.collapse(); } }, @@ -1250,11 +1293,25 @@ var menu = new Ext.menu.Menu({ if(this.isExpanded() || !this.hasFocus){ return; } + + if(this.title || this.pageSize){ + this.assetHeight = 0; + if(this.title){ + this.assetHeight += this.header.getHeight(); + } + if(this.pageSize){ + this.assetHeight += this.footer.getHeight(); + } + } + if(this.bufferSize){ this.doResize(this.bufferSize); delete this.bufferSize; } this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign)); + + // zindex can change, re-check it and set it if necessary + this.list.setZIndex(this.getZIndex()); this.list.show(); if(Ext.isGecko2){ this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac @@ -1307,6 +1364,6 @@ var menu = new Ext.menu.Menu({ }); Ext.reg('combo', Ext.form.ComboBox); -+myCombo.keyNav.esc = function(e) { // Override ESC handling function + this.collapse(); // Standard behaviour of Ext's ComboBox. + this.setValue(this.startValue); // We reset to starting value on ESC +}; +myCombo.keyNav.tab = function() { // Override TAB handling function + this.onViewClick(false); // Select the currently highlighted row +}; +