Adding three or more widgets to a GWT LayoutPanel
Question
I want to display three or more DataGrids in my LayoutPanel and specify their width as a percentage of the total width of the LayoutPanel, but in the LayoutPanel methods i see only methods for setting the width of the left and right widgets. setWidgetLeftWidth()
and setWidgetRightWidth()
.
Is it possible to add more than 2 widgets to a LayoutPanel like
layoutPanel.add(dataGrid1);
layoutPanel.add(dataGrid2);
layoutPanel.add(dataGrid3);
layoutPanel.add(dataGrid4);
and then set the width of each widget to be 25% of the width of the LayoutPanel?
Thanks and regards Mukul
Solution
Well I think you could do it with LayoutPanel too, but using the DockLayoutPanel is much easier! Here is the code for a the example you tried with a LayoutPanel.
public void onModuleLoad() {
//define a DockLayoutPanel with a Percentage size definition
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PCT);
//add four widgets to the DockLayoutPanel, each with a Percentage
//with of 25%
dockLayoutPanel.addWest(new Label("widget 1"), 25);
dockLayoutPanel.addWest(new Label("widget 2"), 25);
dockLayoutPanel.addWest(new Label("widget 3"), 25);
//the last widget must always be added with the .add method
//since it takes the rest of the screen
dockLayoutPanel.add(new Label("widget 4"));
//set a with to the DockLayoutPanel (elso you don't se much)
dockLayoutPanel.setWidth("500px");
dockLayoutPanel.setHeight("500px");
//add it to the RootPanel
RootPanel.get().add(dockLayoutPanel);
}
So as long as you don't have a good reason why you must use LayoutPanel, I'd use the DocklayoutPanel!
OTHER TIPS
What you have will work, all you need to do is to make each one setup like the following:
layoutPanel.add(dataGrid1);
layoutPanel.setWidgetLeftRight(dataGrid1, 0, Unit.PCT, 25, Unit.PCT);