ExtJS4中设置tabpanel的tab高度问题

  最近碰到个问题,在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了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ml

初学java之(盒子分布)

1 import javax.swing.*; 2 3 import java.awt.*; 4 class WinGrid extends JFr...

26910
来自专栏菩提树下的杨过

ExtJs学习笔记(12)_Anchor布局

Anchor布局的效果直接看代码和效果图最为直观 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona...

1896
来自专栏超然的博客

那些年,我们被耍过的bug——haslayout

IE,这个令所有网站设计人员讨厌,但又不得不为它工作的浏览器。不论是6、7还是8,它们都有一个共同的渲染标准haslayout,所以haslayout 是一个非...

851
来自专栏偏前端工程师的驿站

CSS布局:水平居中

前言                                 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开...

1858
来自专栏用户2442861的专栏

CSS技巧(一):清除浮动

http://www.cnblogs.com/ForEvErNoME/p/3383539.html

231
来自专栏一“技”之长

标签之美八——网页框架 原

其中属性设置的值可以是百分比,可以是固定值,*符号表示除了已经分配后的剩余空间。上面代码中每个html文件设置不同的背景颜色,效果如下:

631
来自专栏LIN_ZONE

css 使元素居中

<div style="text-align:center;">居中显示</div>

574
来自专栏偏前端工程师的驿站

CSS3魔法堂:禁止用户改变textarea大小

一、前言                             在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅...

1788
来自专栏一“技”之长

Java开发GUI之FlowLayout流布局

    FlowLayout顾名思义,即流式布局。其默认以行进行布局,可以设置对齐模式,当一行的距离不够组件进行排列时,FlowLayout会自行进行换行。

853
来自专栏web

关于border边框重叠颜色设置问题

1284

扫描关注云+社区