更改ExtJS 4标签的高度 [英] Change the Height of an ExtJS 4 Tab

查看:121
本文介绍了更改ExtJS 4标签的高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

上下文:我正在编写一个ExtJS应用程序,以帮助志愿者管理营地数据库.包含紧急信息,饮食要求和机舱分配.我希望它对用户友好,以便志愿者能够迅速将其拾取,因此我决定标签应该更大,以引起人们对应用程序主要操作的关注.

Context: I'm writing an ExtJS application to help volunteers manage a camp database. Containing emergency information, dietary requirements and cabin allocation. I want it to be user-friendly so that volunteers will pick it up quickly, so I decided the tabs need to be bigger to draw attention to the main actions of the application.

问题:我只是不知道如何更改标签的高度.

Problem: I just don't know how to change the tab height though.

到目前为止的工作:

  • 我尝试为标签面板设置tabBar属性,但是标签没有调整大小,样式看起来很奇怪
  • 我浏览了论坛,有人建议修改CSS,但是没有没有示例

可以帮忙吗?这就是我要实现的目标:

Can you help? This is what I want to acheive:

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

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

推荐答案

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

I think I've found a solution!

确保已设置要使用的Ext.tab.Panel的'cls'属性,然后将以下内容粘贴到自定义CSS文件中.

Ensure you have set the 'cls' property of the Ext.tab.Panel you're using, then paste the following into your custom CSS file.

.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 */
}

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

Note this makes the tabs bigger and middle-aligns the text, but ideally the icon would also be middle-aligned.

这篇关于更改ExtJS 4标签的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆