1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Manchester, UK
    Posts
    112
    Answers
    4
    Vote Rating
    8
    LisburnLad will become famous soon enough

      0  

    Default Answered: Toolbar Button Width

    Answered: Toolbar Button Width


    When my toolbar initially shows, the button on the left-hand side shrinks to fit its button text - this can be seen in the first picture:

    Initial.PNG

    I then dynamically change the button text, this time giving it a long string and again the button resizes to fit the text (seen in the second image):

    LongButton.PNG

    However, when I then reset the button text to use the first, short, text item, the button no longer resizes and ends up with a massive space to the left and right of the text (seen in the final image):

    After.PNG

    This can also be seen in action using the following fiddle - click on the home button to change the button text:





    How can I get the button to resize when the button is given a short text item? (I notice that if I view the toolbar in my iphone, and change the orientation, then the toolbar redraws and the button shrinks to fit the text).

    Thanks for any help.

  2. Hi Johnny - thanks for the suggestion - it turns out that I don't actually need to store the original width of the button (since the string I set the button text to may not be the same as it was before, just something shorter than the big long string - setting it back to the original was only an example).

    However, since buttons will expand ok to fit their text, all I need to do is to set the width of the button to zero before setting the text and then everything works as it should. So the setting bit now becomes:

    Code:
    backBtn.element.setWidth(0);
    backBtn.setText('Short');
    Thanks for pointing me in the right direction.

  3. #2
    Sencha Premium Member
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    34
    Answers
    10
    Vote Rating
    8
    Johnny Major will become famous soon enough

      1  

    Default


    A quick fix you could store off the width then apply it back when needed.

    Code:
    Ext.application({
        name: 'Fiddle',
    
    
        launch: function() {
            Ext.Viewport.add({
                xtype: 'titlebar',
                docked: 'top',
                title: 'Navigation',
                items: [{
                    align: 'left',
                    id: 'backButton',
                    text: 'Short'
                }, {
                    iconCls: 'home',
                    align: 'right',
                    handler: function() {
                        var titleBar = this.up('titlebar')
                        if (titleBar) {
                            var backBtn = titleBar.down('#backButton');
                            if (backBtn) {
                                if (backBtn.getText() === 'Short') {
                                    //store off the original width
                                    //
                                    backBtn.origWidth = backBtn.element.getWidth();
                                    
                                    backBtn.setText('This button has a super long title that causes the ellipses to appear');
                                } else {
                                    backBtn.setText('Short');
                                    
                                    //if original width found use it
                                    //
                                    if (backBtn.origWidth){
                                        backBtn.element.setWidth(backBtn.origWidth)
                                        backBtn.origWidth = null;
                                    }
                                }
                            }
                        }
                    }
                }]
            });
        }
    });

  4. #3
    Sencha User
    Join Date
    Dec 2008
    Location
    Manchester, UK
    Posts
    112
    Answers
    4
    Vote Rating
    8
    LisburnLad will become famous soon enough

      0  

    Default


    Hi Johnny - thanks for the suggestion - it turns out that I don't actually need to store the original width of the button (since the string I set the button text to may not be the same as it was before, just something shorter than the big long string - setting it back to the original was only an example).

    However, since buttons will expand ok to fit their text, all I need to do is to set the width of the button to zero before setting the text and then everything works as it should. So the setting bit now becomes:

    Code:
    backBtn.element.setWidth(0);
    backBtn.setText('Short');
    Thanks for pointing me in the right direction.

Thread Participants: 1

Tags for this Thread