View Full Version : [SOLUTION] autoSize in Ext.form.ComboBox

28 Jan 2008, 5:12 PM

I'm reworking the autoSize() method of the TextField to work with a combobox. While developing two questions comes to mind:

Why is the autoSize() method bound to Ext.emptyFn and how do I change that?
How do I add a field to a toolbar and then resize it, without breaking the toolbar design?

Right now the code is adjusted to my app but it would be easy to change. However the second problem troubles me. I just don't see the point of having this method if it can't be used with a toolbar.

My implementation goes through the comboboxs store and get the longest value. Then set the size of the input element, the div wrapper for the list and each list item.

Cheers, Jon.

28 Jan 2008, 5:39 PM
Regarding the second issue.. It was so much easier than I imagine!
If there is interest I will create an overwrite of the combobox widget. So that you can just call autoSize() or pass in grow : true in the configuration.

29 Jan 2008, 6:39 AM
Hello dotnetCarpenter,

I'm very interresting by this fonctionnality. Could you please shared this ?

Best regards


29 Jan 2008, 8:05 AM
Just what I wanted to hear. I'll prepare the code now :-)

30 Jan 2008, 5:57 AM
Ok here goes. I have created an Ext extension and a workaround.
The workaround is a quick-fix solution that you should only apply, if you for some reason can't change from the native Ext combobox to my extended combobox.

The following code will resize the combobox to the width of the widest item in your store.

var store = new Ext...
var combobox = new Ext...

var v = "";
if(v.length < record.data.[combobox.displayField].length)
v = record.data.[combobox.displayField];
var metric = Ext.util.TextMetrics.createInstance(combobox.getEl());
var el = combobox.getEl();
var d = document.createElement('div');
v = d.innerHTML;
d = null;
v += " ";
var w = Math.min(combobox.growMax, Math.max(metric.getWidth(v) + /* add extra padding */ 10, combobox.growMin));
// the width of the arrow-button is 17 px
w += 17;
combobox.setSize(w);// set the size of the container (needed for toolbar support)

The extension
Just put grow : true in the config object and the combobox will automatically resize. If for some reason it doesn't e.i. the user can manually resize, you can use the autoSize() method. Remember to have the Ext.ux namespace in your page before including the Combo-autoSize.js file.

var combobox= new Ext.ux.ComboBox({
store: yourStore,
displayField: 'yourDisplayField',
grow: true

Cheers, Jon!

11 Sep 2008, 5:43 AM
Good solution. Put me on the right track to get what I wanted (I only wanted the list to grow, not the text box).

Just one small note: if you're using a template for your list items, you may want to use

combobox.tpl.apply(record.data);instead of

EDIT: oops, just noticed this thread is about Ext 1.x. I don't know if this applies to that version.