专栏首页hbbliyongExtJS4中设置tabpanel的tab高度问题

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

相关文章

  • Oracle 问题小结

    1.级联更新 //例子1 update (select a.name aname,b.name bname from test1 a,test2 b where...

    hbbliyong
  • 使用JPA中@Query 注解实现update 操作

    使用JPA中@Query 注解实现update 操作,代码如下: @Transactional @Modifying(clearAutomatically = ...

    hbbliyong
  • 代码创建 WPF 旋转、翻转动画(汇总)

    先建立一个button <Button Width="80" Height="60" Content="旋转" Name="trans" Cl...

    hbbliyong
  • 从后端到前端之Vue(二)写个tab试试水 1.    数据包2.    模板

      上一篇写了一下table,然后要写什么呢?当然是tab了。动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了。

    用户1174620
  • MarkDown 创建目录

    onety码生
  • 从后端到前端之Vue(三)小结

      上一篇写了一下tab,下面整理一下用过的知识点,本想按照官网的文档,整理一下可以更清晰,结果也许是我的方法不对吧,总之更模糊了。

    用户1174620
  • 批量 SQL 之 FORALL 语句

        对PL/SQL而言,任何的PL/SQL块或者子程序都是PL/SQL引擎来处理,而其中包含的SQL语句则由PL/SQL引擎发送SQL语句转交到SQL引擎...

    Leshami
  • 如何查看某个js 变量 runtime 类型

    一种办法是根据byId传入的id value到具体的xml view里根据id 查询,可得知tab 是一个指向List类型的变量。

    Jerry Wang
  • WPF 动画实战 点击时显示圆圈淡出效果

    本文告诉大家一个有趣的动画,在鼠标点击的时候,在点击所在的点显示一个圆圈,然后这个圆圈做动画变大,但是颜色变淡的效果。本文的控件可以让大家将对应的容器放在自己应...

    林德熙
  • Python利用pillow判断图片完整

    py3study

扫码关注云+社区

领取腾讯云代金券