I am working on a project that uses Google Web Toolkit (GWT). I am using a dock layout panel to layout a webpage. In the CENTER, I have a flow panel that adds a set of children with different sizes. When the number of widgets becomes large, then CENTER panel doesn't re-size to include these new widgets. How can I make the dock layout panel resize the center panel so that all the children widgets of the flow panel in the center panel are all shown clearly? I would greatly appreciate it if anyone could provide some information on this. I know that the dock layout panel uses absolute positioning but the flow panel I have is set to dynamically resize when the flow panel has multiple widgets.
Thanks,
MPH
The purpose of GWT ***LayoutPanel widgets is to provide predictable, pixel perfect layout in every browser, as a result it's not possible for the DockLayoutPanel to resize it's center component. Your N, S, E, W components have fixed sizes. How do you expect the DockLayoutPanel to maintain those component sizes AND resize the center component to accomodate growing content inside?
Add the docklayout panel on rootlayout panel den it will resize properly:
DockLayoutPanel p = new DockLayoutPanel(Unit.EM);
/*add N S E W compenents */
RootLayoutPanel rp = RootLayoutPanel.get();
rp.add(p);
hope this will work for you.
Related
I'm a newbie to GWT.And i wonder when to use panels and when to use layout panels.I'm really confused.Can anyone provide a legit use case , where we need to use panels instead of layout panels and vice versa?.Thanks.
When you need a child to take its initial size from a parent and then resize when a parent resizes, use a LayoutPanel or another panel that implements ProvidesResize() interface. This way, for example, you can split the browser window into top menu and main area parts, and make the main area change its size as the browser windows is resized.
When you want a panel to take its size from its own content, use HTMLPanel or FlowPanel.
I have used the EventManager.onWindowResize event to handle window resize to adjust my layout. It works fine only for the Viewport. I want my inner commponents, viz. Grids and Panels to be adjusted accordingly. Is there a way to achieve this? I have written custom code to handle the resize individually for every component. Which works fine for my grids and panels. But, the panel headers don't resize! They are just stuck there.
My layout is as follows:
[Viewport]
[Form Panel]
[Panel containing Grid] [Panel containing Grid]
[/Form Panel]
[/Viewport]
The Grids resize but not the Panel which contains the Grid. Moreover, I've used anchor, but my percent widths are ignored.
Any default way to implement resize?
Used anchor layout everywhere. The Viewport required some JS code, but anchor solved my problem. Thanks everyone for their inputs.
I have a border layout in ExtJS where there is a north panel which, in turn, has several panels nested in it.
The "parent" north panel is collapsible and has a splitter. The problem is, whenever I move the splitter, the other panels are repainted too late.
Example: if my panel is 300px and I resize it to 320px, my panels remain 300px. If i resize again to, say, 350px, the panels get resized to 320px.
The parent panel's layout mode is set to "auto" by default.
When I set the layout mode of the parent panel to "vbox", the other panels resize appropriately in width. However, these child-panels are expandable/collapsible as well, and with the vbox layout I can no longer expand them fluently.
Anyone have a clue what's going on/how to fix the lag?
Edit: after further investigation, it appears to only affect the headers of the panels, not the panels themselves.
I fixed it (for now) by adding the following to the parent panel, even though it's laggy...
listeners: {
resize: function() {
Ext.each(this.items.items, function(child){
var w = child.getWidth();
child.getHeader().setWidth(w);
});
}
}
I'm trying to build a GWT GUI, but I'm not sure if it's possible. Basically, I need to be able to stack three layouts/panels, one on top of another like this:
Bottom Layout: Panel that fills the whole screen (will actually contain SVG stuff).
Middle Layout: DockLayoutPanel with tools docked around the edges, also full screen.
Top Layout: Transparent panel, again filling the whole screen.
Is it possible to stack panels like this? I assume I could use AbsolutePanel to do it somehow, but I was hoping for a nicer solution.
Thanks,
Jon
Because you want a DockLayoutPanel inside, try with a LayoutPanel (or the RootLayoutPanel) and simply add your widgets in order as, by default, a child of a LayoutPanel fills its parent.
i like to design entire html with GWT.
but when i press ctrl and + then entire html must be zoomed from center not from upper left
corner.
then what type of panel should i use?
flow panel , stack panel i dont know.
Any, but your root panel should have a fixed (or minimum) width and be centered.
Flowpanels are based on divs, so that's what you probably want.