question about container width management

[mike lebowski]

I have tabpanel with two tabs and a docked toolbar.
I want to dynamically set the title of the docked toolbar. Not knowing in advance the possible values of this title, it will be acceptable if longer titles show up truncated with elipsis as in "A long title blah ..."
However, what is not acceptable is for a long title to force the width of the entire container to be wider than the iphone view itself. And that is what is happening. If I set the title to be something long, the toolbar does not truncate the title as I hoped. Instead the toolbar is extended off to the right beyond the right border of the phone itself , which is not acceptable.

So what am I missing about containers and layouts that is getting me into this situation. After reading another thread, I even stopped using the title property of the toolbar, and instead used a child item of type title, in the hope that this would give me the control I needed. But i find myself with the same problem.

Here is my toolbar code:



items: [
{
xtype: 'toolbar',
itemId: 'titleBar',
docked : 'top',
items : [
{
xtype: 'title',
title: 'A very long title that I wish to be truncated by elipsis. I do not want this to widen the toolbar but it is, argh!',
flex: 4,
docked: 'left'
},
{
xtype: 'button',
itemId: 'favoriteButton',
iconCls: 'star',
iconMask: true,
docked: 'right',
flex: 1
}
]
},


The parent of this toolbar is an Ext.tab.Panel with a card layout.

Any suggestions?

[rdougan]

If you want the title to be aligned to the left of the toolbar, you can set the top/left/bottom values of the title component, and ensure you remove all flex properties.


Ext.setup({
onReady: function() {
Ext.Viewport.add({
xtype: 'toolbar',
itemId: 'titleBar',
docked : 'top',
items : [
{
xtype: 'title',
title: 'A very long title that I wish to be truncated by elipsis. I do not want this to widen the toolbar but it is, argh!',
top: 0,
left: 0,
bottom: 0
},
{
xtype: 'button',
itemId: 'favoriteButton',
iconCls: 'star',
iconMask: true,
docked: 'right'
}
]
});
}
});

If you want the title centered (when it is short enough), then you should use the TitleBar component:


Ext.setup({
onReady: function() {
Ext.Viewport.add({
xtype: 'titlebar',
itemId: 'titleBar',
docked : 'top',
title: 'A very long title that I wish to be truncated by elipsis. I do not want this to widen the toolbar but it is, argh!',
items: [
{
xtype: 'button',
itemId: 'favoriteButton',
iconCls: 'star',
iconMask: true,
align: 'right'
}
]
});
}
});

(Make sure you set the align configuration of the button to right in the above case).

[mike lebowski]

I will try those suggestions Robert. But I am a bit confused by them. My problem is not the relative positioning of the title (left) and favorite button (right). All of the variations I have experimented with have given me the desired left to right positioning. My problem is that toolbar is dynamically sizing to accomadate the FULL title, even when that results in pushing the favorite button out of view (in its still docked position). And it also screws up the layout of the tab panel below the docked toolbar (allowing them to be wider than I want).

So looking at your suggestions, I can only infer that my mistake is in using flex? As your suggestions suggest not to use flex? So is it impossible to combine flex with fixed width? My initial impression was that flex was intended to allocate fractional width to each element, WHILE honoring the maximum width as represented by the device view - i.e. the iphone in portrait mode has less width than the iphone in landscape mode.

Anyway, let me try your suggestions and get back to you.

[mike lebowski]

Robert, good news. I tried your suggestion and it did work. I guess the flex was creating the problem. Thanks much.

[mike lebowski]

ok, followup. The first suggestion you made did work. In the second case, the favorite button showed up on the left, despite the "align: 'right', property. (maybe a bug in PR3).

But back to your first suggestion.



{
xtype: 'title',
title: 'A very long title that I wish to be truncated by elipsis. I do not want this to widen the toolbar but it is, argh!',
//docked: 'left',
top: 0,
left: 0,
bottom: 0

},

What is the reason that top,left, bottom settings result in a the "truncation with elipsisis" effect that I want. But "dock: 'left'" does not? I mean everything else can be the same. But if I use "dock: 'left'" instead of the top,left,bottom properties, I do not get the truncation and elipsis, I get the full title which pushes everything else to the right (original problem). Is that a predictable difference b/t "dock" and "top/left/bottom" ? I don't really understand why the difference in truncation or non truncation ensues from those properties which I associate with positioning? Is it explicable and intentional or just "that's the way it is"?