tabs - GXT TabPanel 在左上角和右上角有标签

Question

我是 GXT 的新手，我正在尝试创建 TabPanel，它在左侧有一些选项卡，在右侧有一些选项卡（如图 2 所示）。我可以毫无问题地创建最简单的 TabPanel，如图 1 所示。

在 GWT 中，我设法以这种方式将一些选项卡移动到右侧：

tabLayoutPanel.getTabWidget(i).getParent().addStyleName("right");

和 CSS：

.right {
   float: right;
   margin-right: 6px;
}

但我在 GXT TabPanel 中找不到像getTabWidget这样的选项。

你能帮我处理这个案子吗？提前致谢。

Answer 1

您必须做一些小技巧才能访问 GXT 3 中的选项卡处理程序。

class StylableTabPanel extends TabPanel {
    public void applyTabStyles(Widget widget, String styles) {
        findItem(getWidgetIndex(widget)).applyStyles(styles);
    }
}

然后：

tabPanel = new StylableTabPanel();
HTML shortText = new HTML("Lorem ipsum...");
tabPanel.add(shortText, "Short Text");
HTML longText = new HTML("<b>lorem ipsum dolor sit amet...</b>");
tabPanel.add(longText, "Long Text");
tabPanel.applyTabStyles(longText, "margin-left: 300px;");

不幸的是，您必须手动计算左边距，因为您不能在此处使用“float: right”：GXT 开发人员决定分配“width: 1000000px;” 到包含标签的 UL 元素。所以这样的浮动规则只是将它推到容器的右边缘之外（除非你的屏幕宽度超过 1000000 像素；]）。

我希望这有帮助。