折叠的ContentPanel不显示新标题

Question

我有一个ContentPanel，它设置为可折叠

ContentPanel bottomPanel = new ContentPanel();
BorderLayoutData layoutData = new BorderLayoutData(LayoutRegion.SOUTH);
layoutData.setSplit(true);
layoutData.setCollapsible(true);

// some code

add(bottomPanel, layoutData);

并设置该面板的标题为

bottomPanel.setHeading("title");

如果面板未折叠，则设置标题将设置该面板的新标题。 但是，如果面板折叠，则无法使用。 标题始终显示最后的标题集，而不会折叠。 在已折叠和未折叠两种状态下，getter始终返回新标题

bottomPanel.getHeading(); // "old Heading"
bottomPanel.setHeading("new Heading");
bottomPanel.getHeading(); // "new Heading"

我认为这是一种渲染问题

Answer 1

折叠ContentPanel时，标题栏（HEAD）会被CollapsedPanel替换，CollapsedPanel会创建自己的标题元素，并且无法修改（即使您更改了ContentPanel标题）。

检查CollapsePanel.class> onRender（...）

com.extjs.gxt.ui.client.widget.ContentPanel
com.extjs.gxt.ui.client.widget.CollapsePanel
com.extjs.gxt.ui.client.widget.layout.BorderLayout

Answer 2

虽然无法在折叠状态下更新ContentPanel的标题，但可以编写一种解决方法：

1. 展开面板
2. 设定新的标题
3. 折叠面板

除此之外，这是一种解决方法，并且不美观，它只有一个缺点：用户将看到面板（自动）塌陷。 只要这不会打扰您，此替代方法将为“折叠”面板设置新的标题。

首先：不要在LayoutData上调用setCollapsible(boolean) ，而是在ContentPanel上调用！ 否则，这将无法工作。

ContentPanel bottomPanel = new ContentPanel();
bottomPanel.setCollapsible(true);
BorderLayoutData layoutData = new BorderLayoutData(LayoutRegion.SOUTH);
layoutData.setSplit(true);
//layoutData.setCollapsible(true);

完成此操作后，您可以像这样设置新的标题：

public void setNewHeading(ContentPanel panel, String heading) {
  if(panel.isCollapsed()) {
    panel.expand();
  }

  panel.setHeading(heading);

  DeferredCommand.addCommand(new Command() {
    public void execute() {
      panel.collapse();
    }
  });
}

这里的关键是DeferredCommand ，它将在所有当前待处理的事件处理程序完成时执行。

Answer 3

这是我使用的简化版本（GXT 3）。

当北部小部件合拢时，下面的代码在CollapsePanel中显示一些文本：

borderLayoutContainer.addCollapseHandler(
    new CollapseItemHandler<ContentPanel>() {
        @Override
        public void onCollapse(CollapseItemEvent<ContentPanel> event) {
            if (event.getItem() == northContentPanel) {
                CollapsePanel collapsePanel = (CollapsePanel) borderLayoutContainer.getNorthWidget();
                collapsePanel.getElement().insertFirst("<span style='color: red; font-size: bold;'>Here is the collapsed panel title</span>");
            }
        }
    });

当然，除了插入标题作为CollapsePanel的第一个元素之外，您还可以做一些更聪明的事情，例如插入复杂的小部件 。