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替换，后者会创建自己的标题元素，并且无法进行修改（即使您更改了ContentPanel标题）。

检查CollapsePanel.class＆gt;的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的标题，但可以编写解决方法：

展开面板
设置新标题
折叠面板

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

首先：不要在setCollapsible(boolean)上调用LayoutData，而是调用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的第一个元素插入，而是可以更聪明地执行inserting a complex widget。

折叠的ContentPanel不显示新的标题

3 个答案: