Resize Ext.form.ComboBox to fit its content

Question

There are quite few solutions on Ext forums, but I wasn’t able to get any of them work. It seems I am missing something minor.

I need to resize combobox to fit its content when it’s first created. I do not need to worry about resizing it when content is changing.

Is there any working examples using Extjs 3.2?

Current Code:

var store = new Ext.data.ArrayStore({
    fields: ['view', 'value', 'defaultselect'],
    data: Ext.configdata.dataCP
});

comboCPU = new Ext.form.ComboBox({
    tpl: '<tpl for="."><div class="x-combo-list-item"><b>{view}</b><br /></div></tpl>',
    store: store,
    displayField: 'view',
    width: 600,
    typeAhead: true,
    forceSelection: true,
    mode: 'local',
    triggerAction: 'all',
    editable: false,
    emptyText: 'empty text',
    selectOnFocus: true,
    listeners: { select: AdjustPrice, change: AdjustPrice, beforeselect: function (combo, record, index) { return ('false' == record.data.disabled); } },
    applyTo: 'confelement'
});

I've also tried removing width: 600 and replacing it with minListWidth: 600 but that result following and didnt fix the issue.

Answer 1

try autoWidth: true

and remove the width parameter

Answer 2

width: 600 is correct, so you must have some other issue going on that's not obvious from what you posted. You might try removing the applyTo config and instead put renderTo: Ext.getBody() just to see if it has something to do with how it's applied to your element. Are you sure there is not some other code that could be affecting the width?

Answer 3

I’ve found ExtJS plugin which suppose to give me what I want. Its posted on ExtJS Forums.

When I am trying to implement this plug in into my code I get "Ext.ux.ComboListAutoSizer is not a constructor" as I've described in that forum thread.

Does anybody know what might be the problem? Any help is highly appreciated.