How to keep toolbar title width under control

[jurrie]

I have a details page of an item consisting of:

• A toolbar for the item's title and a back button to the list of items
• A summary panel
• A toolbar with buttons allowing the user to open f.e. pictures of the item
• A panel with a detailed description of the item

Some items have long titles. When the title is set to the toolbar, its width is extended so the whole title will fit. As a result, the other components on the page also become wider and parts disappear off the screen. In Sencha 1.1, this issue did not occur. I assume this is due to Ext.Title which may not exist in that version.

My question is: how can I control this dynamic title width? I do not want to set a fixed width since we may want to support different phone resolutions, landscape mode and tablets.

In a perfect world. I'd like to determine the width of the title bar without content and scale the title itself to fit, but I am unable to find any method/event which can help me to achieve that.

Thanks in advance for any info or hints.

[TommyMaintz]

In ST2 we have something called a NavigationBar. It extends Toolbar, and it automatically manages the width of the title for you. It also gives each button in its item the configuration option align. This allows you to put a button to the left or the right of the title.

[jurrie]

Even better than I hoped and works like a charm; thanks!

I reckon I should browse through the components for other new, convenient ones :-)

[tthai]

Hi, i'm having same issue and found this:
/docs/#!/api/Ext.navigation.Bar-method-refreshNavigationBarProxy

But it says this is a private class. Ext.navigation.Bar

I don't want to use NavigationView component but still want abilityt so the long title is not overlapping back button.