ExtJS4中设置tabpanel的tab高度问题
ExtJS4中设置tabpanel的tab高度问题
hbbliyong
发布于 2018-03-05 15:52:54
发布于 2018-03-05 15:52:54
最近碰到个问题，在ExtJS中应该如何设置tabpanel的tab的高度？因为默认情况下，tab的高度太矮了，以至于tab的标题底部字都被截掉。设置了个tabpanel.minHeight = ‘500’，但是这个仅仅是设置tabpanel的高度，而不是设置tabpanel的每个tab的标题的高度。随后，又改成了minHeight:‘50’，好像效果还是不理想。
如果只是为了每个tab的高度的话，自然tab高度依赖于tabpaenl的高度，tabpanel又依赖于外层组件的高度，如果仅仅把tabpanelrenderTo body的话，那tabpanel在渲染的时候就自动高度了，所以想要它主动扩大高度，必须把tabpanel设置一个高度或者设置一个最小高度。 如果在其他容器里的话，比如panel什么里的，只需要把panel的layout设置成fit即可先写CSS样式 。
<style type=”text/css”>
#tab-id .x-tab-bar-body { height: 40px !important; }
#tab-id .x-tab-bar-strip { top: 38px !important; }
</style>DEMO如下：
Ext.onReady(function () {
Ext.create(‘Ext.tab.Panel’, {
frame: true,
height: 150,
width: 300,
activeTab: 1,
id: ‘tab-id’,
renderTo: Ext.getBody(),
tabBar: { height: 40,
defaults: { height: 37 } },
items: [
{ title: '标签页1', html: '标签页1' },
{ title: '标签页2', html: '标签页2' } ] }); });主要就是这个属性
tabBar: { height: 40,
defaults: {
height: 37 } }里面的高度一个是TAB的标题高度，一个是TAB BAR本身的高度，注意里面还有一个分割线，就是那个x-tab-bar-strip对应的线条。若是要改整个项目，就不需要那个ID下的类这样写CSS。 这个是限制ID下的CSS类
<style type=”text/css”>
#tab-id .x-tab-bar-body
{ height: 40px !important; }
#tab-id .x-tab-bar-strip
{ top: 38px !important; }
</style>Ext.onReady(function () {
Ext.create(‘Ext.tab.Panel’, {
frame: true,
height: 150,
width: 300,
activeTab: 1,
id: ‘tab-id’,
renderTo: Ext.getBody(),
tabBar: {
height: 40,
defaults: { height: 37 } }, items: [
{ title: '标签页1', html: '标签页1' },
{ title: '标签页2', html: '标签页2' }]
}); });主要这个属性
tabBar: { height: 40,//tab bar高度
defaults: {//tab 里的title的高度
height: 37 } },注意：需要用id: ‘tab-id’,这个限制CSS类。这样就ok了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2013-07-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读