PDA

View Full Version : How to set a combo box width to that of longest choice?



salmon
16 Aug 2007, 2:43 PM
I'd like to have the width of a combo box be equal to the length of the longest possible choice. I don't like the way it looks when a user selects a long choice only to have it truncated when the field loses focus. I tried to 'grow' config option, but too no avail.

Essentially, I want it to act like a traditional select field in respect to the field width.

Is there a no fuss way to acheive this that I'm missing? I don't really see anything in the ComboBox docs.

Thanks for any help.

BTW, since this is my first post post here, I would be out of line if I didn't heap praise on ExtJs and the development team. I've used it in one application that went into production a few months ago, and couldn't be more pleased. Working on the second now, where it willl be used much more extensively. Great work.

gtaylor
12 Sep 2007, 9:21 AM
I'm having similar problems. Did you ever figure this out?

devnull
12 Sep 2007, 9:38 AM
I had this problem too, and found a snippet of code on here somewhere for it (sorry, dont remember who it was) which i modified slightly for my needs:


Ext.override(Ext.form.ComboBox,{
autoSize : function(){
if(!this.grow || !this.rendered){
return;
}
if(!this.metrics){
this.metrics = Ext.util.TextMetrics.createInstance(this.el);
}
var el = this.el;
var v = el.dom.value + " ";
var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
this.el.setWidth(w);
//resize the parent node as well so the layout doesnt get messed up
Ext.get(this.el.dom.parentNode).setWidth(w+17); //17 is the width of the arrow
this.fireEvent("autosize", this, w);
}
});

the grow property is disabled for comboboxes for some reason (perhaps a dev could explain why, i never saw a reason); thise code enables it again.

methodz
26 Sep 2007, 10:26 AM
The above code works once something is selected, but not when one of the otehr choices is longer, it will show up in the list, if you set the list width in this action, a gray area appears to the right.:((

devnull
26 Sep 2007, 10:59 AM
Yeah, I noticed that there were still problems with the listWidth too. I looked into it a bit, but just ended up setting the listWidth to a large enough static value in the combo config.
It really bothers me that the combobox renders so much differently than an html select...