Tabs 更改ExtJS 4选项卡的高度
上下文:我正在编写一个ExtJS应用程序来帮助志愿者管理营地数据库。包含紧急信息、饮食要求和舱位分配。我希望它是用户友好的,以便志愿者能够快速地拿起它,因此我决定标签需要更大,以吸引人们对应用程序的主要操作的注意 问题:我只是不知道如何改变标签的高度 迄今为止的工作:Tabs 更改ExtJS 4选项卡的高度,tabs,size,height,extjs4,tabpanel,Tabs,Size,Height,Extjs4,Tabpanel,上下文:我正在编写一个ExtJS应用程序来帮助志愿者管理营地数据库。包含紧急信息、饮食要求和舱位分配。我希望它是用户友好的,以便志愿者能够快速地拿起它,因此我决定标签需要更大,以吸引人们对应用程序的主要操作的注意 问题:我只是不知道如何改变标签的高度 迄今为止的工作: 我尝试为选项卡面板设置tabBar属性,但是选项卡没有调整大小,而且样式看起来很奇怪 我浏览了论坛,有人建议修改CSS,但没有示例 你能帮忙吗?这就是我想要实现的: 我想我找到了解决办法 确保已设置所使用的Ext.tab.
- 我尝试为选项卡面板设置tabBar属性,但是选项卡没有调整大小,而且样式看起来很奇怪
- 我浏览了论坛,有人建议修改CSS,但没有示例
你能帮忙吗?这就是我想要实现的:
我想我找到了解决办法 确保已设置所使用的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 */
}
注意,这会使选项卡变大,并使文本居中对齐,但理想情况下,图标也会居中对齐使用,您只需设置:
$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
文件中,您可以找到其他有用的变量来自定义选项卡大小和颜色。如果您使用extjs4,请使用SASS和Compass对ExtJS样式表进行任何更改
您只需在my-custom-theme.scss中添加以下变量即可更改选项卡的高度:
$tab-height: 40px;
您需要在TabPanel定义中添加“MainPanel”作为类。非常有用——感谢您花时间发布自己的答案。