更改 ExtJS 4 选项卡的高度

Question

---

上下文：我正在编写一个 ExtJS 应用程序来帮助志愿者管理营地数据库。包含紧急信息、饮食要求和舱位分配。我希望它是用户友好的，以便志愿者能够快速掌握它，因此我决定标签需要更大，以引起人们对应用程序主要操作的关注。

问题：我只是不知道如何更改选项卡高度。

到目前为止的工作：

• 我尝试为我的选项卡面板设置 tabBar 属性，但选项卡没有调整大小，而且样式看起来很奇怪
• 我浏览了论坛，人们建议修改 CSS，但有没有例子

---

你能帮忙吗？这就是我想要实现的目标：

http://tinypic.com/r/sltr9g/7

http://postimage.org/image/10x22n8ec/

Answer 1

我想我已经找到解决方案了！

确保您已设置正在使用的 Ext.tab.Panel 的“cls”属性，然后将以下内容粘贴到自定义 CSS 文件中。

.MainPanel .x-tab-bar-strip {
    top: 40px !important; /* Default value is 20, we add 20 = 40 */
}

.MainPanel .x-tab-bar .x-tab-bar-body {
    height: 43px !important; /* Default value is 23, we add 20 = 43 */
    border: 0 !important; /* Overides the border that appears on resizing the grid */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
    height: 33px !important; /* Default value 13, we add 20 = 33 */
    line-height: 33px !important; /* Default value 13, we add 20 = 33 */
}

请注意，这会使选项卡变大并使文本居中对齐，但理想情况下图标也居中对齐。

Answer 2

使用 带有 Compass 的新 ExtJS 4 主题，您只需

$tab-height: 40px !default;

在 appname/resources/ 中 设置： sass/my-ext-theme.scss。

您将遇到的唯一问题是 标签栏下方的额外空间错误，在使用自定义主题时总是出现。但这可以很容易地解决，正如那里所解释的，通过设置你的 CSS 之一：

.x-tab-bar
{
    position: absolute;
}

在 ExtJS 包中的 resources/themes/stylesheets/ext4/default/variables/_tabs.scss 文件中，你可以找到其他有用的变量来自定义选项卡大小和颜色。

Answer 3

如果您使用的是 extjs4，请使用 SASS 和 Compass 在 extjs 样式表中进行任何更改。

您可以在 my-custom-theme.scss 中添加以下变量来更改选项卡的高度：

$tab-height: 40px;