GXT TabPanel 在左上角和右上角有标签答案

【问题标题】：GXT TabPanel with tabs on the top-left and top-right sideGXT TabPanel 在左上角和右上角有标签
【发布时间】：2013-01-30 16:59:39
【问题描述】：

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

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

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

和 CSS：

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

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

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

【问题讨论】：

标签： tabs gxt tabpanel

【解决方案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 像素；]）。

我希望这会有所帮助。

【讨论】：

我试过这个，但标签页眉仍然出现在顶部。能贴出完整的代码吗？
你用这个工作了好几个小时后救了我！谢谢你。顺便说一句，您是如何提出解决方案的？我不能忍受 GXT 的一件事是，我不明白如何修改基本代码库来做我想做的事。
@NickO：只是浏览器中的开发工具（我更喜欢 Chrome 进行开发）和学习 GXT 的代码源。如果您的 IDE 调整正确（我推荐 IDEA 或 Eclipse + Maven），那么所有需要的资源都将在手边。
还有一件事：来自有关applyStyles 方法的文档：样式属性名称必须为小写字母，例如"backgroundColor:white; color:red;。没有它，firefox 无法正确显示样式（在 Chrome 和 IE 中它工作正常）。