View Full Version : E

14 Dec 2011, 2:04 PM
I'm reviewing GXT for a new application and am having trouble in a few areas. I'm using 3.0-SNAPSHOT as I want to use the current GWT version and I understand you are making your 3.0.x such that GWT widgets can be used with GXT.

Specifically I'm having trouble with the following.

1. In a main section of our application users must be able to re-arrange windows, both re-size and move (DnD). The windows will snap to a grid but each individual window can be any number of columns wide and any number of rows tall. So regarding your layout containers I don't find any that can do this (let me know if that's wrong). Your Portal container is close but it seems that each panel has to be contained within one column, so that won't work. So I am using the GWT AbsolutePanel this works but doesn't seem to play well with GXT. I have this added as the center widget of your BorderLayoutContainer, however I need this to be scrollable and I can't figure out how to do that in GXT. I've tried to wrap it with GWT's ScrollPanel but then GXT shows the ScrollPanel but it hides the AbsolutePanel (its contents is not there). I've tried to enable scrolling in the GXT panels but can't figure out how, methods that exist in online demos have been removed in this version and it seems have no replacement. What is the best way to create a scrollable layout like this?
2. I'm not clear on how GXT handles sizing things. For example, how can I make the application full size of the page (and auto-resize as the user resizes the page) and then all content is proportional to the app size? It seems that GXT tends to want fixed sizes, i.e. BorderLayoutData, VerticalLayoutData take fixed pixel sizes. Sometimes that's desired but often what is needed is relative sizes, how can this be done?
3. Are there any docs for GXT classes? Although Javadocs are available for DP5 build they don't have any text that describes the classes and methods. I.e. I need some documentation that explains whatVerticalLayoutContainer andVBoxLayoutContainer are and how they are different, for example.
4. I'm having trouble with TabPanels. I have one with two tabs, but what is rendered is strange, the two tabs are offset to the right (there is an empty tab like tab first) and then the really strange part there is a bold black dot in the first and second tab, not the third.

Perhaps some of this issues are because this is a SNAPSHOT build I am using but its making it hard to do my evaluation...not sure if GXT can do this...I hope so.

Colin Alworth
15 Dec 2011, 10:31 AM
Beta1 went out a week or two ago, and is in maven central as com.sencha.gxt:gxt:3.0.0-beta1, or can be downloaded from the downloads page.

Portal doesn't cover the use case you are talking about - we don't have any provided tiling window managers like what you are referring to. Building one that is as flexible as you are looking for will probably need to be pretty specific for your application.

Layouts are an important piece that Ext GWT brings to the game. The layout that html/css provides allocates space for small items, and parents are sized based on that. This usually works well when considering writing documents - paragraphs need to contain a lot of content, and children tend to be paragraphs that should be sizing their parents.
Application building is a little different - page-sized scroll bars are not usually thought of a good thing. As a result, GXT has had a Viewport widget which, when added to the page, takes up the visible browser space and hides scroll bars. The application is built inside of that using layouts.
For many layout containers, children are sized and positioned by their parents. There are exceptions, such as the flow layout (which just uses the normal html flow to position things, usually best to use for forms and the like).
Most of the *LayoutData classes that accept a value use a double - anything greater than 1.0 is considered to be a pixel value, and anything in the range 0-1.0 is considered to be a percentage.

We're working on documenting the existing work now, as well as building better and more descriptive examples for how to use the features available. Look for better javadocs in the coming betas, or feel free to ask questions. The forums are always a good place, and a few of us are available in #extgwt on irc.freenode.net as well for discussions.

As far as your tab panel issue, it is hard to say what the issue could be without seeing a sample of the code and possible a screenshot of what doesnt look right. Make sure you are loading the reset.css file (check with firebug that it is actually loading and styling the page).

15 Dec 2011, 2:15 PM
Thanks for the update on Beta1, however I didn't see any differences between that and SNAPSHOT. Btw, one benefit of Beta1 is that you have sources and javadocs published to Maven which is great, then my IDE IntelliJ auto attaches those and that's a big help. It would be great if your SNAPSHOT had sources and javadocs too.

Regarding the TabPanel issue I have attached a screenshot from Firefox, I found that in Chome and IE it didn't have the black dot but all the rest of the bad formatting is the same (note the leading area and the large empty row under the tabs, that should be much thinner.)

Regarding the layouts, thanks for the tip on how to configure these as a percentage. However I still don't see how to manage scrollbars. I'm making a web application not a web site if that clarifies things. I need to be able to add scrollbars to any internal panel. I'm using Border Layout for the most part and one of its panels is an AbsolutePanel because I need that custom sized grid layout I described. I can't figure out how to add scroll bars to this? It needs scroll bars because it's content may be much to big to fit 100% in the viewable area. It's not much different than Outlook, if the list of email headers is too long to fit in the viewable area it provides a vertical scrollbar to get to the ones not currently visible, ditto for the email content viewer panel.

Also regarding the Viewport class I couldn't even get that to work for the main panel because what it did was hide the lower part of the application (since it turned off scrollbars and the app was too big the lower part was impossible to get to).

What I would like to be able to do is let the application be full size, i.e. as big as the page is (with perhaps a minimum size) but then as the user makes the page smaller (or adds more content in the app) individual panels would add a scroll bar (vertical or horizontal) if needed. I haven't been able to get any scrollbars to work with GXT yet.

Also, another strange behavior is that unless I set a fixed pixel size on my main panel BorderLayoutContainer the UI renders in a completely garbage fashion, here is the top level of the app:

ContentPanel panel = new ContentPanel();
NorthSouthContainer comp = new NorthSouthContainer();
comp.setNorthWidget(buildMenuBar()); // Just the menu bar
comp.setSouthWidget(buildMainPanel()); // Has rest of application

where buildMainPanel() creates the BorderLayoutContainer that has to have a fixed size for some reason.


Colin Alworth
15 Dec 2011, 2:29 PM
We're somewhat limited in what we can do with snapshots, but yes, I think the last snapshot was published just before beta1 went out.

Make sure you have the reset.css file on your html page, and that it is being loaded correctly - check firebug for that. Tabs are drawn as <li> elements, and the reset file removes that.

Scrollbars should be created by any element that is sized to a certain size, but does not size its children - the FlowLayoutContainer is an example of this. In the case of your draggable windows that need to a) be sized and positioned, but b) need to keep a minimum size, you are going to need custom layout code to build your particular rules. In the case of outlook, remember that the list of emails is a listview of sorts, and when viewing a particular email, it is able to specify a size, and if the content (for that content is closer to a document than to an application) will produce scrollbars.

Getting the particular behavior of automatically growing as needed, but only to a particular size means monitoring the size of the child, something GXT doesn't do by default. In most cases it is not necessary, and as many browsers (IE for example) are already short on processing power, adding extra checks any time something changes (even though it may never change) is an unneeded expense.

If you can put together a simple example of what you are trying to do, myself and the other team/community members will hopefully be able to give you suggestions as to how to go about building it. If it is as simple as an email reader, with two panes one over the other, it is probably just a matter of getting the html/css right (use max-height in non-ie browsers, and height in ie using CssResource to select for the current browser). If you are building a tiling window manager that allows users to drag/drop and resize outside of the current visible viewport, things may get a little more complex...

For your last note, remember to start with a Viewport as the root element, as it will detect the size of the browser, and update its children accordingly. Add the NorthSouthContainer to the Viewport, and it (and its children) will be sized as needed.

Apoligies if I have missed anything, these are long messages covering many topics at once.

19 Dec 2011, 8:55 AM
The standard "RootPanel.get().add(widget)" technique must be used with care when a BorderLayout is also being accessed.

BorderLayoutContainer implements the HasOneWidget interface so it supports the getWidget() method. However, if you trace the implementation code, ONLY the Center region's content is affected by setWidget(w) and ONLY the Center region's content is returned.

If you want to pull in the border regions, you must encapsulate the BorderLayoutContainer or handle it differently; don't rely on the HasOneWidget mapping!

19 Dec 2011, 9:17 AM
I'm making some progress here.

I found a workaround for BorderLayoutContainer needing fixed pixel size, I posted that in a separate issue: http://www.sencha.com/forum/showthread.php?162341-BorderLayoutContainer-does-not-render-right-unless-fixed-pixel-size-is-specified

Regarding the 'reset.css file on your html page' yeah i fixed that. I had copied your GXT setup.txt verbatim and forgot to replace {module name} my my actual module name. With this fixed the tabs do render correctly.

So my remaining issue is missing scroll bars I will put together a sample of what I am trying to do. I agree this thread is getting a bit long so I will post to new thread.


19 Dec 2011, 9:45 AM
See http://www.sencha.com/forum/showthread.php?163124-How-to-add-scrollbars-to-AbsolutePanel&p=694632 regarding how to get scroll bars to work.