PDA

View Full Version : Content of third (nested) TabPanel is not being rendered.



anahuacv
16 Nov 2011, 3:13 AM
The issue is that the content of the TabItems of the most nested TabPanel is not being rendered.
I have created a TabPanel that in one of its TabItems has another TabPanel, and the last one has in one of its TabItems another TabPanel.

I'm attaching the code to reproduce the problem. Any help is much appreciated.




import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GWT_Test implements EntryPoint {

private Viewport viewport;
private ContentPanel appPanel;

/**
* This is the entry point method.
*/
public void onModuleLoad() {
// Viewport provides window-resizing
viewport = new Viewport();
viewport.setBorders(false);
viewport.setLayout(new FitLayout());

RootPanel.get().setSize("100%", "100%");
RootPanel.get().add(viewport);

appPanel = new ContentPanel();
appPanel.setLayout(new BorderLayout());
appPanel.setHeaderVisible(false);
appPanel.setBorders(false);

/* Setting up tabs */
TabPanel myTabs = createTabs();
myTabs.setSize("100%", "100%");
appPanel.add(myTabs, new BorderLayoutData(LayoutRegion.CENTER));

viewport.add(appPanel);
viewport.layout();
}

/** Creating tabs **/
private TabPanel createTabs() {
String tabName = "Tab";

TabPanel mainTabPanel = new TabPanel();
mainTabPanel.setSize("100%", "100%");
mainTabPanel.setMinTabWidth(115);
mainTabPanel.setAnimScroll(true);
mainTabPanel.setTabScroll(true);


TabItem testTabItem = new TabItem();
testTabItem.setLayout(new FitLayout());
testTabItem.setText(tabName + " 1");
testTabItem.setClosable(false);
// testTabItem.add(TestTab.getInstance());
testTabItem.add(initSubTabPanel());

TabItem testTabItem2 = new TabItem();
testTabItem2.setText(tabName + " 2");
testTabItem2.setLayout(new FitLayout());
testTabItem2.add(getTestPanelText());

TabItem testTabItem3 = new TabItem();
testTabItem3.setText(tabName + " 3");
testTabItem3.setLayout(new FitLayout());
testTabItem3.add(getTestPanelText());

mainTabPanel.add(testTabItem);
mainTabPanel.add(testTabItem2);
mainTabPanel.add(testTabItem3);

mainTabPanel.setSelection(testTabItem);

return mainTabPanel;
}

private ContentPanel initSubTabPanel(){
ContentPanel panel = new ContentPanel();
panel.setLayout(new FitLayout());
panel.setHeaderVisible(false);

String tabName = "Sub-Tab";

TabPanel testTabPanel = new TabPanel();
testTabPanel.setSize("100%", "100%");
testTabPanel.setMinTabWidth(115);
testTabPanel.setTabScroll(true);

TabItem testTabItem = new TabItem();
testTabItem.add(initSubSubTabPanel());
testTabItem.setText(tabName + "1");

TabItem testTabItem2 = new TabItem();
testTabItem2.add(getTestPanelText());
testTabItem2.setText(tabName + " 2");

TabItem testTabItem3 = new TabItem();
testTabItem3.add(getTestPanelText());
testTabItem3.setText(tabName + " 3");

testTabPanel.add(testTabItem);
testTabPanel.add(testTabItem2);
testTabPanel.add(testTabItem3);

testTabPanel.setSelection(testTabItem);

panel.add(testTabPanel);

return panel;
}

private ContentPanel initSubSubTabPanel(){
ContentPanel panel = new ContentPanel();
panel.setLayout(new FitLayout());
panel.setHeaderVisible(false);

String tabName = "Sub-Sub-Tab";

TabPanel testTabPanel = new TabPanel();
testTabPanel.setSize("100%", "100%");
testTabPanel.setMinTabWidth(115);
testTabPanel.setTabScroll(true);

TabItem testTabItem1 = new TabItem();
testTabItem1.add(getTestPanelText());
testTabItem1.setText(tabName + "1");

TabItem testTabItem2 = new TabItem();
testTabItem2.add(getTestPanelText());
testTabItem2.setText(tabName + " 2");

TabItem testTabItem3 = new TabItem();
testTabItem3.add(getTestPanelText());
testTabItem3.setText(tabName + " 3");

testTabPanel.add(testTabItem1);
testTabPanel.add(testTabItem2);
testTabPanel.add(testTabItem3);

testTabPanel.setSelection(testTabItem1);

panel.add(testTabPanel);

return panel;
}

private Widget getTestPanelText(){
ContentPanel tpanel1 = new ContentPanel();
tpanel1.setHeading("SubTabPanelText");
tpanel1.addText("For the imeasure elearning application, I needed an abstract list of search results. "
+"Abstract in the way that the search results did not link to a specific item, they did not even "
+"have a title or any metadata assigned. the only relevant property was wether an item was considered "
+"relevant or not-relevant. As a first version, I created a grid with only one column, with the "
+"text “relevant” or “not relevant”. To add some visual aid, relevant items had a green font-color, "
+"irrelevant items were red.");
return tpanel1;
}

}

WesleyMoy
17 Nov 2011, 10:43 PM
You're setting a fit layout on each of the content panels, but you're not setting any layout on the individual tab items. As a result, your innermost content panels (created in getTestPanelText) are being added, but the parent elements (the tab items) have a height of 0. To fix this, set the layout of each tab item as tabItem.setLayout(new FitLayout()).

As a general suggestion for this code, you don't need to add the content panels to each tab item. Tab items have layout already, so you gain nothing from adding a content panel without a header. If you've set the layout to the tab items as I've suggested above, you can just add each tab panel to a tab item without putting it in a content panel first.

In summary, set a fit layout on each tab item, and add each tab panel directly into a tab item.

anahuacv
18 Nov 2011, 1:43 AM
Thanks for your help.