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

相关文章

来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

3033
来自专栏Android干货

小程序实践(六):view内部组件排版

     ①、当水平排列的时候  , justify-content:center ; 决定水平居中

982
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

833
来自专栏前端新视界

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码:

872
来自专栏前端学习心得

如何居中一个元素(终结版)

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和...

1922
来自专栏小狼的世界

利用setTimeout和SetInterval构建Javascript计时器

看到了一篇深入浅出的讲解setTimeout和setInterval的例子,直接讲英文贴出来吧,也不是很难。

1293
来自专栏前端小叙

css绝对定位如何在不同分辨率下的电脑正常显示定位位置?

有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用。 首先要明白如下几...

4147
来自专栏ShaoYL

iOS---设置控件的内容模式

35012
来自专栏菜鸟计划

CSS布局(六) 对齐方式

一、水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将...

3565
来自专栏前端知识分享

第212天:15种CSS居中的方式,最全了

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉...

781

扫码关注云+社区