Resize Ext.form.ComboBox to fit its content

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', 'v开发者_运维知识库alue', '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. alt text http://img28.imageshack.us/img28/7665/4272010105134am.png

Try the following:

1. Determine the list-box option with the most chars
2. Create a div and set the option with the most chars
3. Append this div to the body
4. Get the div's clientWidth

Below codes works in ExtJs 3.2!

myStore = new Ext.data.Store({
 ...
listeners : {
            load: function() {
                var maxValue = "";
                var charLen = 0, maxCharLen = 0;
                var maxListWidth = 300;

                /**
                 * This is a work-around since the 'listWidth' property
                 * does not accept any values that would simulate auto-resize
                 * in reference to the category with the most characters.
                 */
                this.data.each(function(item, index, totalItems ) {
                    var nameValue = item.data['name']; // 'name' is the field name

                    if(nameValue == null || nameValue == ''){
                        // do nothing
                    }else {
                        charLen = nameValue.length;
                        if(charLen > maxCharLen){
                            maxCharLen = charLen;
                            maxValue = nameValue;
                        }
                    }
                });

                if(maxValue != ""){
                    var divEl = document.createElement('div');
                    divEl.id = 'tempEl';
                    divEl.style.display = "inline";
                    divEl.className = "x-combo-list";
                    divEl.innerHTML = maxValue;

                    document.body.appendChild(divEl);

                    // check if appended
                    divEl = document.getElementById('tempEl');
                    if(divEl) {
                        var divWidth = divEl.clientWidth;
                        if(divWidth == 0 ) {
                            divEl.style.display = "inline-block";
                            divWidth = divEl.clientWidth;
                        }

                        // the allocated width for the scrollbar at side of the list box
                        var scrollbarWidth = 30;

                        // make sure that column width is not greater than
                        if((divWidth + scrollbarWidth) > maxListWidth) {
                            maxListWidth = divWidth + scrollbarWidth;
                            myCombo.listWidth = maxListWidth; 
                        }
                        document.body.removeChild(divEl);
                    }
                }
            }
});

var myCombo = new fm.ComboBox({
 ...
});

try autoWidth: true

and remove the width parameter

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?

Found here:

// throw this stuff in a closure to prevent
// polluting the global namespace
(function(){

    var originalOnLoad = Ext.form.ComboBox.prototype.onLoad;
    Ext.form.ComboBox.prototype.onLoad = function(){
        var padding = 8;
        var ret = originalOnLoad.apply(this,arguments);
        var max = Math.max(this.minListWidth || 0, this.el.getWidth());
        var fw = false;
        Ext.each(this.view.getNodes(), function(node){
            if(!fw){ fw = Ext.fly(node).getFrameWidth('lr'); }
            if(node.scrollWidth){ max = Math.max(max,node.scrollWidth+padding); }
        });
        if( max > 0 && max-fw != this.list.getWidth(true) ){
            this.list.setWidth(max);
            this.innerList.setWidth(max - this.list.getFrameWidth('lr'));
        }
        return ret;
    };

})();