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了。
ExtJS4中设置tabpanel的tab高度问题的更多相关文章
- ligerUI布局时,Center中的Tab高度太小问题解决
1.0 引用的js,css <link href="/Content/scripts/ligerUI/skins/Aqua/css/ligerui-all.css" rel= ...
- 【swift,oc】ios开发中巧用自动布局设置自定义cell的高度
ios开发中,遇到自定义高度不定的cell的时候,我们通常的做法是抽取一个frame类,在frame类中预算好高度,再返回. 但是苹果出来自动布局之后...春天来了!!来看看怎么巧用自动布局设置自定义 ...
- 在 Vim 中设置 Tab 为4个空格
缩进用 tab 制表符还是空格,这不是个问题,就像 python 用四个空格来缩进一样,这是要看个人喜好的.在 Vim 中可以很方便的根据不同的文件类型来设置使用 tab 制表符或者空格,还可以设置长 ...
- HTML 的超链接 a 标签中如何设置其宽度和高度?
HTML 的超链接 a 标签中如何设置其宽度和高度? 在DIV CSS布局中,html 中 a 超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享如何实现 a 标签宽 ...
- 复制/etc/profile至/tmp/目录,用查找替换命令删除/tmp/profile文件中的 行首的空白字符及在vim中设置tab缩进为4个字符
1.复制/etc/profile至/tmp/目录,用查找替换命令删除/tmp/profile文件中的 行首的空白字符 在命令模式下,使用正则表达式匹配 行首有空白字符行的模式:^[[:space:]] ...
- 【转】VIM 中设置Tab
灵活操作 Vim 中的 Tabsgaleki post @ 2007年11月16日 05:07PM in Vim Tips with tags: vim tabs Vim 支持 Tabs,也就是标签页 ...
- iframe的内容增高或缩减时设置其iframe的高度的处理方案
WEB管理软件往往是如下结构的 用户点击子页tab切换中部的显示内容,在切换过程中需要保证前面的子页保持先前的状态.这种情况一般都使用iframe来来作为切换的子页显示内容. 但是这里有一个问题,if ...
- Extjs4中的布局
布局用于定义容器如何组织内部子元素和控制子元素的大小.在一个应用程序中,作为定义容器的组织形式,布局是一个十分重要的组件.是显示单个子元素?还是垂直或水平显示多个子元素?这些均由布局来定义.并且布局将 ...
- WPF设置DataGrid行内容高度自适应 与 TextBox/TextBlock内容高度自适应
WPF设置DataGrid行内容高度自适应 TextBox/TextBlock内容高度自适应 参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ...
随机推荐
- ABP框架系列之三十六:(MVC-Views-MVC视图)
Introduction ASP.NET Boilerplate is integrated to MVC Views via Abp.Web.Mvc nuget package. You can c ...
- 第34 memcached缓存
1.缓存数据库 缓存:将数据存储在内存中,只有当磁盘胜任不了的时候,才会启用缓存. 缺点:断电数据丢失(双电),用缓存存储数据的目的只是为了应付大并发的业务,至于数据存储及可靠性不要找他了. 数据 ...
- zlib+pcre+openssl+nginx安装
安装nginx之前首先有3个包先要安装,一个是zlib,一个是pcr3,还有一个openssl http://nginx.org/en/docs/configure.html,这个是Nginx的安装手 ...
- python3调用zabbix api
前言 今天写了一个zabbix api,这里整理一下,过程中自己也学习了一些东西. 需求 我们需要查一个文件内容如下: cat /ops/flume_hosts node1 node2 需要把这个文件 ...
- Beta冲刺 (4/7)
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 共享编辑文章的后端数据处理 展示Gi ...
- python 引入本地 module
数据校验时,需要引入本地的一个告警python代码,引入的方式如下: import sys import os # 引入本地文件目录,或和需要引入的python文件放在同一个文件夹下 sys.path ...
- Django Admin 专题
Django admin Django强大的功能之一就是提供了Admin后台管理界面,简单配置就可以对数据库内容做管理 创建ModelAdmin并注册 from django.contrib impo ...
- Android 开发工具方法整理
1. 获取当前手机系统语言 Locale.getDefault().getLanguage(); 2. 获取当前手机系统版本号 android.os.Build.VERSION.RELEASE; 3. ...
- 首页背景图片在PC端有显示,在手机端不显示的解决方法
今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...
- [CocoaPods]如何使用CocoaPods插件
CocoaPods +插件 CocoaPods是一个由极少数维护者运营的社区项目,需要维护大量的表面区域.可以肯定地说CocoaPods永远不会支持Xcode支持的每个功能,即使这样,团队也必须对许多 ...