更改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 */
}

请注意,这会使标签更大,中间对齐文本,但理想情况下,图标也会中间对齐.