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 @@ -444,7 +439,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 @@ -491,7 +486,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){ @@ -514,26 +509,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); @@ -725,17 +732,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 (this reference of the ComboBox. Example:
+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
+};
+