更改ExtJS 4标签的高度 [英] Change the Height of an ExtJS 4 Tab
问题描述
上下文:我正在编写一个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://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屋!