0

我有一个 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"

我认为这是一种渲染问题

4

3 回答 3

0

当 ContentPanel 被折叠时，标题栏 (HEAD) 会被 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
于 2013-06-12T19:09:46.147 回答
0

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

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

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

首先：不要调用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，它将在所有当前挂起的事件处理程序完成时执行。

于 2014-02-14T15:29:06.360 回答
0

这是我用来做的事情的简化版本（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 的第一个元素之外，您还可以做一些更聪明的事情，比如插入一个复杂的小部件。

于 2014-07-21T15:32:36.070 回答