PDA

View Full Version : [FIXED][3.??] ComboBox and autoWidth



stever
21 Apr 2009, 2:55 PM
When you set a combo to have an autoWidth of true, IE has errors. Mainly due to this:

In boxcomponent:


afterRender : function(){
Ext.BoxComponent.superclass.afterRender.call(this);
this.boxReady = true;
this.setSize(this.width, this.height); // this.width is undefined (normal)
if(this.x || this.y){
this.setPosition(this.x, this.y);
}else if(this.pageX || this.pageY){
this.setPagePosition(this.pageX, this.pageY);
}
},


then



setSize : function(w, h){
... // aw is now set to "auto"
this.onResize(aw, ah, w, h);
this.fireEvent('resize', this, aw, ah, w, h);
}
return this;
},


then


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); // lw is now NaN (Math.max does that when you send it a string "auto")
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
}
},

then to layer:


// overridden Element method
setWidth : function(w, a, d, c, e){
this.beforeAction();
var cb = this.createCB(c);
supr.setWidth.call(this, w, a, d, cb, e);
if(!a){
cb();
}
return this;
},

then


/**
* Set the width of this Element.
* @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setWidth : function(width, animate){
var me = this;
width = me.adjustWidth(width);
!animate || !me.anim ?
me.dom.style.width = me.addUnits(width) : // trying to set it to "NaNpx"
me.anim({width : {to : width}}, me.preanim(arguments, 1));
return me;
},

And IE does not like setting an HTML node's style width to "NaNpx".

stever
21 Apr 2009, 3:27 PM
Actually it seems like two errors. addUnits(NaN) should not return "NaNpx" first of all. I think this is a Ext3 only bug. Secondly, the logic needs some cleaning up -- one should check for the auto value before doing a max() call...

stever
21 Apr 2009, 5:45 PM
For Ext3's Element part:


/**
* @private Test if size has a unit, otherwise appends the default
*/
addUnits : function(size){
if (size == "auto" || unitPattern.test(size)) {
return size;
}
else if (size === "" || size === undefined || size === null) {
return '';
}
return size + (this.defaultUnit || 'px');
},

stever
23 Apr 2009, 6:21 PM
The second bug is a bit more involved, and I'm not sure what should be done besides just setting the w to 0 and getting the minWidth, which is not really an autoWidth after all.

mjlecomte
4 Jun 2009, 12:27 PM
Hi stever,

You would help facilitate resolutions of any issues you are having if you posted a showcase for a scenario where you deem there's a problem.

stever
4 Jun 2009, 3:53 PM
Not an issue anymore.

However, you might want to try this in IE8:


new Ext.Window({
height: 300,
width: 400,
layout:'fit',
items:{
xtype:'form',
columns:1,
items:[{
fieldLabel:'combo',
xtype:'combo',
autoWidth:true,
store:['joe','Nateoooooooooooooooooooooooooooooooo!!'],
value:'Nateoooooooooooooooooooooooooooooooo!!'
}]
}
}).show();

It creates a scroll bar that covers up the item when you click the trigger...

Update: This is in IE8 Quirks mode only. I use Standards mode, so it generally works for me. IE7 Compat mode has different visual issues.

mjlecomte
4 Jun 2009, 5:22 PM
Updating this thread to OPEN as I see attached screenshot in IE8 with the following code:



Ext.onReady(function(){
new Ext.Window({
height: 300,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
columns: 1,
items: [{
fieldLabel: 'combo',
xtype: 'combo',
triggerAction: 'all',
autoWidth: true,
store: ['joe', 'Nateoooooooooooooooooooooooooooooooo!!'],
value: 'Nateoooooooooooooooooooooooooooooooo!!'
}]
}
}).show();

});

evant
4 Jun 2009, 9:59 PM
Seems to be IE in quirks mode, try this:



Ext.override(Ext.form.ComboBox, {
expand : function(){
if(this.isExpanded() || !this.hasFocus){
return;
}
this.list.alignTo(this.wrap, this.listAlign);
this.list.show();
if(!Ext.isBorderBox){
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
}
Ext.getDoc().on({
scope: this,
mousewheel: this.collapseIf,
mousedown: this.collapseIf
});
this.fireEvent('expand', this);
}
});

mjlecomte
5 Jun 2009, 3:44 AM
Looks good to me on IE8.

evant
8 Jun 2009, 5:51 PM
Added a gecko only check, fixed in SVN.

mjlecomte
9 Jun 2009, 4:48 AM
This fix looks good, follow up revealed another issue that sprung up:
http://extjs.com/forum/showthread.php?p=340404