PDA

View Full Version : RowLayout, Hide/Show, component size issues



VadimV1144
28 Jul 2010, 1:07 PM
Hi, it seems that with the multiple row layouts the widgets do not size themselves correctly.
There are 2 RowLayouts - one external that controls the layout of the tab panel and the external content panel (cp), and one that is internal that controls the sizing in one of the tab panels (tabItemOne).
Initially, the content panel is not displayed, and the data in the first tab is displayed correctly. When we switch to the second tab, the content panel is inserted and it also displays correctly. However, if I switch back to the first tab, and hide the content panel (cp), the widgets within the tabitem (tabItemOne) are not sized correctly - the widget that has width set to 1 in the RowData takes too much space, and the widgets that have width set to -1 do not fully expand to their proper width. Same thing happens to the content panel (cp) when its shown when the user switches to the second tab for the second time.
Here is an example, simply switch the tabs several times and see the resulting behavior:


public void onModuleLoad() {
RootPanel.get().add(getTest());//new GeneralTestCases());
}


private ContentPanel cp;
private LayoutContainer lc = new LayoutContainer(new RowLayout(Style.Orientation.HORIZONTAL));

public Widget getTest() {
lc.setSize(800, 800);

final TabPanel tabPanel = new TabPanel();

final TabItem tabItemOne = new TabItem();
tabItemOne.setLayout(new FitLayout());
tabItemOne.setText("Tab1");
tabItemOne.add(getTabOneContents());
tabItemOne.addListener(Events.Select, new Listener<BaseEvent>(){
@Override
public void handleEvent(BaseEvent be) {
hideCP();
}
});

final TabItem tabItemTwo = new TabItem();
tabItemTwo.setText("Tab2");
tabItemTwo.addListener(Events.Select, new Listener<BaseEvent>(){
@Override
public void handleEvent(BaseEvent be) {
showCP();
}
});

tabPanel.add(tabItemOne);
tabPanel.add(tabItemTwo);

lc.add(tabPanel, new RowData(1,1, new Margins(10, 10, 10, 10)));
return lc;
}


private void showCP(){
if(cp == null){
cp = new ContentPanel();
cp.setHeading("Test Panel");
cp.setWidth(300);
lc.insert(cp, 1, new RowData(-1,1, new Margins(10, 10, 10, 10)));
}
cp.show();
lc.layout(true);
}

private void hideCP(){
if(cp == null)
return;
cp.hide();
lc.layout(true);
}

private ContentPanel getTabOneContents(){
ContentPanel cp = new ContentPanel(new RowLayout(Style.Orientation.HORIZONTAL));
ContentPanel left = new ContentPanel();
left.setHeading("Left Panel");
left.setWidth(300);
left.add(new Text("Test Data"));

ContentPanel right = new ContentPanel();
right.setHeading("Right Panel");
right.add(new Text("Test Data"));

cp.add(left , new RowData(-1,1, new Margins(10, 10, 10, 10)));
cp.add(right, new RowData(1,1, new Margins(10, 10, 10, 10)));
return cp;
}

Is there a way to fix this issue?

VadimV1144
28 Jul 2010, 1:10 PM
Forgot to mention the technical specs: IE8 and Firefox 3.1, GXT 2.1.1, GWT 2.0.2

sven
28 Jul 2010, 1:13 PM
Why do you call layout(true)?

VadimV1144
28 Jul 2010, 1:14 PM
if I don't call it after hide/show, the changes are not reflected on screen.

sven
28 Jul 2010, 1:21 PM
Well, ok. After looking more closely at this code, it is needed for that logic.

I will add a change to GXT to make it work

VadimV1144
28 Jul 2010, 10:44 PM
thank you very much, please let me know once the fix is in.