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,499
    Vote Rating
    47
    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
    342
    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
    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


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

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Mar 2011
    Posts
    6
    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

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    828
    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi