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 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

java.sql.SQLException: connection holder is null

java.sql.SQLException: connection holder is null

1341
来自专栏MelonTeam专栏

Bitmap 源码阅读笔记

导语: Android 系统上的图片的处理,跟Bitmap 这个类脱不了关系,我们有必要去深入阅读里面的源码,以便在工作中能更好的处理Bitmap相关的问题...

2498
来自专栏从零开始的linux

mongodb分片

分别在三台机器上面创建 mkdir -pv /data/mongodb/mongos/log mkdir -pv /data/mongodb/config/{d...

3984
来自专栏Hadoop数据仓库

Oracle sqlldr 如何导入一个日期列

1. LOAD DATA INFILE * INTO TABLE test FIELDS TERMINATED BY X'9' TRAILING NULLCO...

1796
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1112
来自专栏码匠的流水账

java9系列(五)Stack-Walking API

java9新增这个类的目的是提供一个标准API用于访问当前线程栈,之前只有Throwable::getStackTrace、Thread::getStackTr...

421
来自专栏linux驱动个人学习

高通msm8909耳机调试

1、DTS相应修改: DTS相关代码:kernel/arch/arm/boot/dts/qcom/msm8909-qrd-skuc.dtsi: 1 s...

7505
来自专栏linux驱动个人学习

高通Audio中ASOC的machine驱动

ASoC被分为Machine、Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的...

9774
来自专栏Pulsar-V

Save Camera Document

#pragma once #include "HCCamera.h" #include <time.h> #include <cstdio> #incl...

2828
来自专栏余生开发

echarts太阳分布图-饼图来回穿梭

var dom = document.getElementById("container");

1202

扫码关注云+社区