PDA

View Full Version : Right align toolbar items



Jangla
30 Oct 2009, 3:51 AM
Before I start, I have looked around the forums and found posts that say I should use the '->' as a first item to make the toolbar items right aligned but it doesn't seem to work.

Here's my toolbar setup code:



var regionCombo = new Ext.form.ComboBox({
store : regionStore,
displayField : 'location',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : 'Select a location...',
selectOnFocus : true,
width : 130,
tpl : resultTpl,
iconCls: 'no-icon'
});

var tabToolBar = new Ext.Toolbar ({
items : [
'->',
new Ext.Toolbar.TextItem ("Jump to another location to focus your search: "),
regionCombo
]
});



And here's the page it's on: http://www.holiday-chateau.com/index.php?id=10790

Jangla
4 Nov 2009, 6:48 AM
Anyone able to help with this?

steffenk
4 Nov 2009, 6:54 AM
seems to be related to my post with toolbar grouping. When you examine the HTML you see that your items are in the left, right is empty. So maybe you try to start with a dummy item for the left like
{xtype: 'tbtext', text: ' '},'->',{...}

Jangla
4 Nov 2009, 6:57 AM
That does put the required items in the right table but it's all still left aligned :)

steffenk
4 Nov 2009, 7:06 AM
have the same problem. Defining width causes "overnesting", i get
<td align="right">
<table>
<tr>
<td>
<table>..right toolbar items..</table>
</td>
</tr>
</table>
</td>

and tables are stretched automatic, so the align doesn't work as expected.

Animal
4 Nov 2009, 7:21 AM
You have inserted your "tabToolBar" Toolbar object as a CHILD ITEM of a Toolbar. Read the code.



tbar : [tabToolBar],

Animal
4 Nov 2009, 7:29 AM
And you are using a custom toolbar layout class in Ext.layout.ToolbarLayout.js which defeats the provided, correctly-functioning ToolbarLayout.

Jangla
4 Nov 2009, 7:32 AM
Ah. I presume you mean the square brackets? In which case I've corrected that and it's still left aligned:



var tabToolBar = new Ext.Toolbar ({
items : [
'->',
new Ext.Toolbar.TextItem ("Jump to another location to focus your search: "),
regionCombo
]
});

var superTabs = new Ext.TabPanel({
renderTo: 'super-tab-panel',
minTabWidth: 115,
width: 680,
height: 575,
autoWidth: false,
autoHeight: false,
enableTabScroll: true,
deferredRender: false,
activeTab: 0,
tbar: tabToolBar,
...

Animal
4 Nov 2009, 7:33 AM
Now remove the Ext.layout.ToolbarLayout.js script.

Jangla
4 Nov 2009, 7:35 AM
Can't - it's required for the wizard on tab 3. Looks like I'll have to stick with left aligned then.

Animal
4 Nov 2009, 7:36 AM
For which bit of that is it necessary?

Animal
4 Nov 2009, 7:38 AM
The horizontal scrollbar on the property list on tab one is ugly.

You should not size that second column, rather use it as the autoFill column.

http://www.extjs.com/deploy/ext-3.0-rc3/docs/?class=Ext.grid.GridView&member=autoFill

Animal
4 Nov 2009, 7:40 AM
I'd suggest it's overkill making "filter-properties-tab" a Panel.

It should just be an Ext.Container. You have no toolbars, buttons, borders etc, so just use a Container instead of a heavyweight class like Panel.

Probably the same goes for the other tabs.

Jangla
4 Nov 2009, 7:50 AM
OK, let me address all those posts one by one:

1. ToolbarLayout. I had thought about posting that you should ask the author of the wizard why it's required. Turns out I removed it just to see what would happen and it works fine without it. There are issues in IE8 (the wizard header isn't visible and I get a stack overflow error on page load but I'm not yet sure the cause of these issues as I've only just looked at it in IE8).

2. Using box components instead of panels. Agreed. Will change.

3. Scrollbars. They only appear when the decriptive text is too long - this is a result of the plonkers adding them making them too long, fluffy and waffly. I will be shortening them significantly so scrollbars don't appear at all. Will also look at the autoFill link you posted.

Animal
4 Nov 2009, 8:04 AM
The horizontal scrollbar appears because the column is explicitly configured with a width which is too wide. Nothing to do with the length of description - that will WRAP within whatever width is available. You must use autoFill to get that column to just fit whatever space is available.

That wizard does not use toolbars, so somebody is leading you up the garden path.

Animal
4 Nov 2009, 8:06 AM
The vertical scrollbar will probably disappear if you have shorter descriptions...

Jangla
4 Nov 2009, 8:09 AM
That wizard does not use toolbars, so somebody is leading you up the garden path.
http://www.extjs.com/forum/showthread.php?t=32132

Is the strip at the bottom where the buttons are not a toolbar?

What browser are you using when you're seeing these scrollbars? I'm on FF3 and don't get them unless there's a description too long:

Animal
4 Nov 2009, 8:52 AM
Yeah, but it's not in the wizard is it? The wizard is the 3rd tab. And has no toolbars.

Jangla
4 Nov 2009, 8:57 AM
Yeah, but it's not in the wizard is it? The wizard is the 3rd tab. And has no toolbars.
Huh? Yes is has - buttons at the bottom allowing you to naviage through the wizard:

Animal
4 Nov 2009, 10:54 AM
Ah, yes, that's a Toolbar isn't it.

Well, perhaps the wizard was developed prior to Ext 3.0, and needed that override back then. To just use two right aligned Buttons you do not need any overrides.

Jangla
4 Nov 2009, 12:19 PM
Yea, that's what I figured. It was developed for 2.0 but was later confirmed as working in 3.0. Don't think anyone pointed out at that point that the override was now surplus to requirements.

Animal
4 Nov 2009, 12:20 PM
I'm getting serious holiday cravings looking at that site though!

I want to stay in a château in the Rhone Alps. I love it there.

Jangla
4 Nov 2009, 12:29 PM
If you can get 20 mates of family members together, you'd be amazed at how cheap it works out too!

Animal
4 Nov 2009, 12:45 PM
We were talking about this just the other day at a family get together. I will suggest http://www.holiday-chateau.com/ to the poor sap who gets lumbered with organizing it. I organized the last big multi family rental holiday in a farmhouse in Spain.