PDA

View Full Version : [SOLVED] Issues with ToolBar and items getting stacked or converted to "menus"



icfantv
24 Jan 2012, 8:19 AM
I have a <div> in my main page whose width is 100%. I have the following code:


ToolBar topMenuBar = new ToolBar();
topMenuBar.setWidth("100%");
topMenuBar.setHeight("30px");
topMenuBar.addStyleName("topMenuBar");
TextButton b1 = new TextButton("button 1");
b1.setWidth(100);
topMenuBar.add(b1);
topMenuBar.add(new SeparatorToolItem());
TextButton b2 = new TextButton("button 2");
b2.setWidth(100);
topMenuBar.add(b2);
topMenuBar.add(new SeparatorToolItem());
TextButton b3 = new TextButton("button 3");
b3.setWidth(100);
topMenuBar.add(b3);
RootPanel.get("menubar").add(topMenuBar);

Instead of getting three buttons side by side, I get a >> chevron and a drop down arrow that, when I click, shows my 3 buttons as menu items. I don't even need the separators, I just want a button bar that will ultimately consist of toggle buttons but I'm trying to start as basic as possible because nothing else I've tried works correctly.

If I drop the width of the buttons to 40 and remove the separators, the first button shows up followed by a >> chevron and drop down arrow that displays the other two buttons as menu items.

What am I doing wrong here? This seems like such an easy thing to build but I've spent nearly a day on this and have gotten nowhere.

icfantv
24 Jan 2012, 9:38 AM
I figured it out. The ToolBar (or probably also ButtonBar and MenuBar) needs a layout by calling setLayoutData(...).

In the ToolBar examples they call:


....setLayoutData(new VerticalLayoutContainer.VerticalLayoutData(1, -1));

However, in this case, what the width and height mean is beyond me because it's not actually documented anywhere I can find.

Colin Alworth
24 Jan 2012, 5:44 PM
The values of those doubles was documented in 2, and the documentation for 3 isn't yet complete (as you've noticed).

Basic idea: Values between 0.0 and 1.0 represent percentages, and values above 1.0 are pixels (with the assumption that a 1px width is useless for anything, except a border, and using a layout system to draw borders is slightly overkill). The remaining value, -1, is used to indicate that the child should be measured instead of given an width. Any measurement takes place first, and its space allocated, then pixel distances, and the remainder is divided up among the percentages.

icfantv
25 Jan 2012, 11:00 AM
Thanks for the info. I am not seeing this class in the 2.x API. Is it called something else? If so, what is it? Thanks.

Colin Alworth
25 Jan 2012, 11:14 AM
It was called RowLayout, and the values were assigned using RowLayoutData, which is the class with the documentation on what the value ranges mean.

icfantv
25 Jan 2012, 1:16 PM
I apologize, I'm still not seeing it in the online docs, which I think are for 2.x: http://www.sencha.com/gxtdocs/. I found RowLayout, but using the search, there does not appear to be any RowLayoutData class. Did you mean perhaps RowData?

Is that link the right place? Thanks.

Colin Alworth
25 Jan 2012, 1:18 PM
Yes, that is what I had meant to type, thanks. I'll try to remember to copy/paste in the future, instead of relying on my brains.

icfantv
25 Jan 2012, 1:21 PM
No worries. Another question:

Can you think of a reason or scenario where using (1,1) would not work but using (1,-1) would?

I followed an example (in 3.x) of adding at toolbar to a grid in a content panel (in a vertical layout) and the toolbar is 1,-1, but the grid is 1,1. I did that in my code and the grid didn't render fully, only the header did. When I changed the grid to 1,-1, everything worked.

Colin Alworth
25 Jan 2012, 1:52 PM
The grid sizes should be 1,1 in that case - what are you adding this content to? Is it possible that the whole system isn't getting laid out correctly?

The root should either be a Viewport, or something where the size is fixed, and layout called after it is attached. It is possible that there are bugs yet lurking in the attach/resize code of some of the containers, so you may need to experiment a bit.

icfantv
25 Jan 2012, 4:44 PM
Ahhh. That would explain it. I'm adding/replacing the contents of an id attributed <div> element via RootPanel.get(String).add(...).

I will create a viewport for this specific div and change the contents.

On this note, is there some sort of "best practices" document for the best way to create the basic structure for a GXT web application?

Colin Alworth
25 Jan 2012, 5:18 PM
As mentioned already, most of the documentation for 3 is not as nice as we'd like yet, but a lot of the basic rules from 2 still apply. You just have to figure out how we renamed stuff... And ask questions - here on the forums is good, as is #extgwt on irc.freenode.net.

Remember that Viewport will take over the page, and size itself to the available space. If you don't want that, you'll need to assign space based on what is available, how big you want it to be, and will need to handle the cases where that space changes.