Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    365
    Vote Rating
    0
    wuschba is on a distinguished road

      0  

    Default Autosize width of combobox

    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
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    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
    Vote Rating
    0
    wuschba is on a distinguished road

      0  

    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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    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
    Vote Rating
    0
    fabrizim is on a distinguished road

      0  

    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 Member varsos's Avatar
    Join Date
    Feb 2008
    Location
    Long Island, NY
    Posts
    341
    Vote Rating
    14
    varsos will become famous soon enough

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Posts
    4
    Vote Rating
    0
    smay is on a distinguished road

      0  

    Default listWidth: 'auto' override

    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

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.