Toolbar Button Width

[LisburnLad]

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.

[Johnny Major]

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

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;
                                }
                            }
                        }
                    }
                }
            }]
        });
    }
});

[LisburnLad]

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:

backBtn.element.setWidth(0);
backBtn.setText('Short');

Thanks for pointing me in the right direction.