PDA

View Full Version : Layout that automatically adjusts sizes of the panels that it contains



dheeraj.more
22 Nov 2009, 9:44 AM
I am evaluating Ext GWT to be used for designing the UI in my project. I searched for a layout that would automatically adjusts the size of remaining child panels to occupy the whole parent panel, when one or more of the child panels is collapsed by the user. To clarify, below is an example:
A parent content panel contains 4 collapsible panels laid out vertically to fill the container. I need a layout for this parent panel so that when one or more of the 4 child panels is collapsed then the remaining 3 or less panels should automatically expand proportionally to cover up the area of the parent panel that got emptied.

I tried the VBoxLayout with Stretch and RowLayout but neither of them automatically adjusted size of remaining panels when one was collapsed.

cheers..
dheeraj

sven
22 Nov 2009, 10:04 AM
You can do this simple with a RowLayout and with adding a collapse/expand listener to the children that call layout on the parent.

dheeraj.more
24 Nov 2009, 9:45 PM
Thanks sven, Can u pls check the below code piece.

ContentPanel Y0 = new ContentPanel();
Y0.setHeading("Panel Y0");
Y0.setLayout(new RowLayout(Orientation.VERTICAL));


ContentPanel Y1 = new ContentPanel();
Y1.setHeading("Panel Y1");
Y1.setCollapsible(true);
ContentPanel Y2 = new ContentPanel();
Y2.setHeading("Panel Y2");
Y2.setCollapsible(true);

ContentPanel Y3 = new ContentPanel();
Y3.setHeading("Panel Y3");
Y3.setCollapsible(true);

Y0.setFrame(true);
Y1.setFrame(true);
Y2.setFrame(true);
Y3.setFrame(true);


Y0.add(Y1, new RowData(1,0.3));
Y0.add(Y2, new RowData(1,0.4));
Y0.add(Y3, new RowData(1,0.3));

In the above code piece, all 3 panels (Y1, Y2 and Y3) are collapsible and added to Y0, What I need is that if i collapse one or more panel the other panels should re-size themselves proportionately to occupy the whole height of Y0. Example, if i collapse Y3 and call layout() on Y0 in the collapse listener then Y1 and Y2 should expand taking up heights proportional to their earlier heights i.e 3:4.

Does Ext GWT have such a layout that I can apply for Y0? OR am i missing something on RowLayout?

Let me know if you need screen shots?

dheeraj.more
1 Dec 2009, 11:07 PM
To achieve the above said functionality in a row layout this is what I did.

In the collapse and expand listener of the child panels I re-calculated the hieghts for the non collapsed ones, removed all panels from the layout and added them with new heights.

Example,

Added these 3 panels to a parent panel with row layout
Panel1 with height in RowData as 0.3
Panel2 with height in RowData as 0.4
Panel3 with height in RowData as 0.3

Collapsed Panel1, thus to make Panel2 and Panel3 occupy the space emptied by Panel1 in the collpase listener of Panel1 i remove all 3 pannels and add them again to the parent panel with,

Panel1 with height in RowData as -1
Panel2 with height in RowData as 0.57
Panel3 with height in RowData as 0.43

Is this the right and the only way to achieve this?

Awaiting help eagerly to decide on purchasing the licenses and finalizing this library for my project..

Dheeraj