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像素;）。

我希望这会有所帮助。