Question

我正在创建ContentPanel并隐藏它：

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

然后在一些事件监听器中，我尝试显示这个隐藏的面板：

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

但此面板显示时没有任何数据。只有当我点击标签数据时才会出现。

那么如何正确隐藏/显示这个面板呢？

编辑：

我正在使用GXT 2.2.4 我正在使用TabPanel创建ContentPanel，其中包含FormPanel并隐藏ContentPanel。

然后在Event Listener中我尝试显示这个隐藏的面板，但它显示没有形式。只有当我点击选项卡表单时才会出现。

这是代码：

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

你有哪个GXT版本？我无法在GXT 3.x上重现您的问题。我写了一个小例子代码，它完全符合你的要求。

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

好的，我明白了。

好的，我看到，因为单击选项卡会显示，为什么不以编程方式选择监听器中的选项卡？

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)

---------下面没有用------------

所以请尝试infoPanel.repaint();

如何动态显示/隐藏GXT面板？

2 个答案: