Autosize width of combobox

[wuschba]

Hello!

I can set the size of the dropdown-box of a combobox with listSize. This works fine. But now I want to make the dropdown-box autoadjust the width so that it fits the width of all items. How is it done?

[tryanDLS]

Did you try autoWidth:true? Also, I thought I saw a suggestion from Animal to try listWidth:'auto'

[wuschba]

Thanks for your reply.

autoWidth:true sets the size of the combo itself - not the dropdown-part.

listWidth:'auto' seems to work (only did some tests yet), but I thought since listWidth is declared as a number in the docs, it's not "allowed" to set it to a string. I got some bad experiences using width: 'auto' and someone here told me not to set a width to a string.

[Animal]

listWidth: 'auto' need an override to allow it to work cross browser.

http://extjs.com/forum/showthread.php?t=63851

[fabrizim]

I just ran into this issue and wrote something before checking the forums. However, I tested Animal's solution, and the list width seems to be the full width of the window in IE6. Here is the code that I used for an override - it is definitely more CPU intensive than Animal's solution, as it finds the max width of all the view nodes for the list.

// 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 = this.minListWidth || 0;
        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;
    };
    
})();

It seems to be working in both IE6, FF3, and Chrome/Safari

Regards-
Mark

[varsos]

fabrizim, it works well, how would incorporate the combo box's width as the absolute minimun?

[fabrizim]

Hi varsos-

I haven't tested, but this should incorporate the boxes width as the minimum with - if minListWidth is provided, the maximum of the two is used.

Regards-
Mark

// 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;
    };
    
})();

[varsos]

It seems to work ok, thanks
I had done something similar.

[smay]

I'm getting access denied for the link below. Can you provide a new link or the override code? I'm using v3.3.1. Thank you.

listWidth: 'auto' need an override to allow it to work cross browser.

http://extjs.com/forum/showthread.php?t=63851

[mitchellsimoens]

That link is to a thread in the premium forums. You would need to purchase a support subscription in order to view that thread.