How to dynamically show/hide GXT panels?

Question

I'm creating ContentPanel and hide it:

final ContentPanel infoPanel = new ContentPanel(); 
final TabPanel infoTabPanel = new TabPanel();
...
//Adding TabItems with some forms
infoPanel.add(infoTabPanel);
infoPanel.hide();
add(infoPanel);

Then in some Event Listener I try to show this hidden panel:

infoPanel.show();
infoPanel.layout();

But this panel is shown without any data. Only if I click on tabs data appears.

So how to hide/show this panel correctly?

EDITED:

I'm using GXT 2.2.4.
I'm creating ContentPanel with TabPanel which contains FormPanel and hide ContentPanel.

Then in Event Listener I try to show this hidden panel, but it is shown without form. Only if I click on tabs form appears.

Here is code:

protected void onRender(Element parent, int pos) {
    super.onRender(parent, pos);
    final ContentPanel infoPanel = new ContentPanel();
    infoPanel.setAutoHeight(true);
    final TabPanel infoTabPanel = new TabPanel();
    infoTabPanel.setAutoHeight(true);

    final FormPanel testForm = new FormPanel();

    FieldSet fieldSet = new FieldSet();
    fieldSet.setHeading("Information");

    FormLayout fLayout = new FormLayout();
    fieldSet.setLayout(fLayout);

    LabelField field1 = new LabelField();
    LabelField field2 = new LabelField();

    field1.setFieldLabel("Field1:");
    field1.setName("field1");

    fieldSet.add(field1);

    field2.setFieldLabel("Field2:");
    field2.setName("field2");
    fieldSet.add(field2);
    testForm.add(fieldSet);

    TabItem formTab = new TabItem("Form Tab");
    formTab.add(testForm);
    infoTabPanel.add(formTab);

    TabItem longText = new TabItem("Long Text");
    longText.addStyleName("pad-text");
    longText.addText("Long Text" + "<br>" + "Long TextLong Text");
    infoTabPanel.add(longText);

    infoPanel.add(infoTabPanel);
    infoPanel.hide();

    Button buttonShow = new Button("show");
    buttonShow.addSelectionListener(new SelectionListener<ButtonEvent>() {
        @Override
        public void componentSelected(ButtonEvent ce) {
            infoPanel.show();
        }
    });

    Button buttonHide = new Button("hide");
    buttonHide.addSelectionListener(new SelectionListener<ButtonEvent>() {
        @Override
        public void componentSelected(ButtonEvent ce) {
            infoPanel.hide();
        }
    });

    add(infoPanel);
    add(buttonShow);
    add(buttonHide);

}

Answer 1

Which GXT version do you have? I can't reproduce your problem on GXT 3.x. I wrote a little example code which does exactly what you're asking for.

public void onModuleLoad() {

    final ContentPanel infoPanel = new ContentPanel();
    final TabPanel infoTabPanel = new TabPanel();

    infoTabPanel.add(new TextButton("moo"), "moo");
    infoTabPanel.add(new TextButton("boo"), "boo");
    infoPanel.add(infoTabPanel);
    infoPanel.hide();

    VerticalLayoutContainer vlc = new VerticalLayoutContainer();
    vlc.setPixelSize(300, 250);

    TextButton buttonShow = new TextButton("show");
    buttonShow.addSelectHandler(new SelectHandler() {

        @Override
        public void onSelect(SelectEvent event) {
            infoPanel.show();
        }
    });

    TextButton buttonHide = new TextButton("hide");
    buttonHide.addSelectHandler(new SelectHandler() {

        @Override
        public void onSelect(SelectEvent event) {
            infoPanel.hide();
        }
    });

    vlc.add(infoPanel, new VerticalLayoutData(1, 1));
    vlc.add(buttonShow);
    vlc.add(buttonHide);
    RootPanel.get().add(vlc);
}

Answer 2

OK I see.

OK I see, since clicking on the tab makes it appear, why don't you programmatically select the tab in your listener?

infoTabPanel.setSelection(formTab);

http://dev.sencha.com/deploy/gxt-2.2.5/docs/api/com/extjs/gxt/ui/client/widget/TabPanel.html#setSelection(com.extjs.gxt.ui.client.widget.TabItem)

---------below didn't work------------

so try infoPanel.repaint();