导航

EXTJS tabpanel配置

Posted on 2014-02-21 19:27  小强有毒  阅读(502)  评论(0)    收藏  举报
/*
Ext.TabPanel主要配置项目表:
activeTab                     String/Number          设置默认激活的tab页的id或索引
animScroll                    Boolean                设置是否在tab页滚动时用动画效果
autoTabSelector               String                 在dom中自动找div的样式选择器(默认'div.x-tab',在autoTabs=true时生效)
autoTabs                      Boolean                设置是否在dom中查找样式类为'x-tab'的div,并转换为tab页(默认false)
enableTabScroll               Boolean                是否在tab标签总宽度超出可用宽度时自动出现滚动按钮(默认false)
layoutOnTabChange             Boolean                是否在tab页切换时重新对tab页元素进行布局
minTabWidth                   Number                 tab标签最小宽度(默认30,只在resizeTabs=true生效)
resizeTabs                    Boolean                设置是否允许tab标签自动调整宽度
scrollDuration                Float                  每次滚动tab标签执行动画的时间(默认.35,只在animScroll=true生效)
scrollIncrement               Number                 每次滚动tab标签的长度(默认100,只在enableTabScroll=true生效)
scrollRepeatInterval          Number                 鼠标左键连续按下,执行滚动操作的时间间隔
tabMargin                     Number                 以像素为单位计算的空白空间
tabPosition                   String                 tab标签在面板上的位置(默认top,bottom)
tabWidth                      Number                 tab标签的初始宽度(默认120)
*/

 tabPanel active 样式

<!--在.jsp页面的ext-all.css定义后,添加-->

.x-tab-strip-top .x-tab-strip-active .x-tab-right {
 background-position: 0 0;
 background-image: url(<%=request.getContextPath()%>/images/tabs-sprite.jpg);
 
}
.x-tab-strip-top .x-tab-strip-active .x-tab-left {
 background-position: right -300px;
 background-image: url(<%=request.getContextPath()%>/images/tabs-sprite.jpg);
 
}
.x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner {
 background-position: 0 -150px;
 background-image: url(<%=request.getContextPath()%>/images/tabs-sprite.jpg);
}