View Full Version : [FIXED-413][3.1] Combo.js in recent SVN

13 Jan 2010, 8:06 PM
I see that someone was trying to get the Combo to deal with z-index problems that can come up. It only fixes a small subset of such issues. Below is a more general one, copied from my version. It looks up the parent tree, feel free to use it:

// private
initList : function(){
var me = this,
cls = 'x-combo-list',
listParent = Ext.getDom(me.getListParent() || Ext.getBody()),
zindex = Ext.fly(listParent).getStyle('z-index'),

if (zindex == "" || zindex == "auto"){
ct = me.findParentBy(function(p){
var z = p.getPositionEl().getStyle('z-index');
return (z != "" && z != "auto");
if (ct)
zindex = ct.getPositionEl().getStyle('z-index');

this.list = new Ext.Layer({
parentEl: listParent,
shadow: me.shadow,
cls: [cls, me.listClass].join(' '),
zindex: (parseInt(zindex ,10) || 12000) + 5

var lw = me.listWidth || Math.max(me.wrap.getWidth(), me.minListWidth);
me.list.setSize(lw, 0);
me.assetHeight = 0;
if(me.syncFont !== false){
me.list.setStyle('font-size', me.el.getStyle('font-size'));
me.header = me.list.createChild({cls:cls+'-hd', html: me.title});
me.assetHeight += me.header.getHeight();

me.innerList = me.list.createChild({cls:cls+'-inner'});
me.mon(me.innerList, 'mouseover', me.onViewOver, me);
me.mon(me.innerList, 'mousemove', me.onViewMove, me);

me.mon(me.list, 'mousedown', function(e){

me.innerList.setWidth(lw - me.list.getFrameWidth('lr'));

me.footer = me.list.createChild({cls:cls+'-ft'});
this.pageTb = new Ext.PagingToolbar({
store: me.store,
pageSize: me.pageSize,
me.assetHeight += me.footer.getHeight();

* @cfg {String/Ext.XTemplate} tpl <p>The template string, or {@link Ext.XTemplate} instance to
* use to display each item in the dropdown list. The dropdown list is displayed in a
* DataView. See {@link #view}.</p>
* <p>The default template string is:</p><pre><code>
'&lt;tpl for=".">&lt;div class="x-combo-list-item">{' + this.displayField + '}&lt;/div>&lt;/tpl>'
* </code></pre>
* <p>Override the default value to create custom UI layouts for items in the list.
* For example:</p><pre><code>
'&lt;tpl for=".">&lt;div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}&lt;/div>&lt;/tpl>'
* </code></pre>
* <p>The template <b>must</b> contain one or more substitution parameters using field
* names from the Combo's</b> {@link #store Store}. In the example above an
* <pre>ext:qtip</pre> attribute is added to display other fields from the Store.</p>
* <p>To preserve the default visual look of list items, add the CSS class name
* <pre>x-combo-list-item</pre> to the template's container element.</p>
* <p>Also see {@link #itemSelector} for additional details.</p>
me.tpl = '<tpl for="."><div class="'+cls+'-item">{' + me.displayField + '}</div></tpl>';
* @cfg {String} itemSelector
* <p>A simple CSS selector (e.g. div.some-class or span:first-child) that will be
* used to determine what nodes the {@link #view Ext.DataView} which handles the dropdown
* display will be working with.</p>
* <p><b>Note</b>: this setting is <b>required</b> if a custom XTemplate has been
* specified in {@link #tpl} which assigns a class other than <pre>'x-combo-list-item'</pre>
* to dropdown list items</b>

* The {@link Ext.DataView DataView} used to display the ComboBox's options.
* @type Ext.DataView
me.view = new Ext.DataView({
applyTo: me.innerList,
tpl: me.tpl,
singleSelect: true,
selectedClass: me.selectedClass,
itemSelector: me.itemSelector || '.' + cls + '-item',
emptyText: me.listEmptyText,
deferEmptyText: false

me.mon(me.view, {
containerclick : me.onViewClick,
click : me.onViewClick,
scope :me

me.bindStore(me.store, true);

me.resizer = new Ext.Resizable(me.list, {
pinned:true, handles:'se'
me.mon(me.resizer, 'resize', function(r, w, h){
me.maxHeight = h-me.handleHeight-me.list.getFrameWidth('tb')-me.assetHeight;
me.listWidth = w;
me.innerList.setWidth(w - me.list.getFrameWidth('lr'));
}, me);

me[me.pageSize?'footer':'innerList'].setStyle('margin-bottom', me.handleHeight+'px');

14 Jan 2010, 7:25 AM
Thanks for the follow-up on that.

Let me ponder the implications of that combined with the intent of the getListParent method, IE6/7, and Combos in absolute layouts.

14 Jan 2010, 7:55 AM
The listParent also has to be non scrollable IIRC.

14 Jan 2010, 10:49 AM
@stever --

I've implemented the theme of your suggestion in svn/trunk so we can all play with it a bit during the 3.1.1 beta. Eyes open. ;)

Jamie Avins
10 Feb 2010, 4:53 PM
Added this check for expand as well since WindowMgr will alter zindex. Marking as fixed svn-6034.