Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Autosize width of combobox

  1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    365

    Default Autosize width of combobox

    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?

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

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

  3. #3
    Sencha User
    Join Date
    Apr 2008
    Posts
    365

    Default

    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.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

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

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

  5. #5
    Ext User fabrizim's Avatar
    Join Date
    Mar 2007
    Location
    Lowell, MA
    Posts
    47

    Default

    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.

    Code:
    // 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

  6. #6
    Sencha Premium User varsos's Avatar
    Join Date
    Feb 2008
    Location
    Long Island, NY
    Posts
    367

    Default

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

  7. #7
    Ext User fabrizim's Avatar
    Join Date
    Mar 2007
    Location
    Lowell, MA
    Posts
    47

    Default

    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

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

  8. #8
    Sencha Premium User varsos's Avatar
    Join Date
    Feb 2008
    Location
    Long Island, NY
    Posts
    367

    Default

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

  9. #9
    Sencha User
    Join Date
    Mar 2011
    Posts
    6

    Default listWidth: 'auto' override

    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.

    Quote Originally Posted by Animal View Post
    listWidth: 'auto' need an override to allow it to work cross browser.

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

  10. #10
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,436

    Default

    That link is to a thread in the premium forums. You would need to purchase a support subscription in order to view that thread.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •