/*
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)
*/
1.通过items添加标签页
/*通过items添加标签页示例*/
Ext.onReady(function(){
var config = {
height:150,
width:300,
activeTab:0, //默认激活第一个tab页
animScroll:true, //使用动画滚动效果
enableTabScroll:true, //tab标签过宽时自动显示滚动条
renderTo:'panel',
//通过items将标签页以子面板的方式加入TabPanel
items:[
{title:'tab标签页1',html:'tab标签页1内容'},
{title:'tab标签页2',html:'tab标签页2内容'},
{title:'tab标签页3',html:'tab标签页3内容'},
{title:'tab标签页4',html:'tab标签页4内容'},
{title:'tab标签页5',html:'tab标签页5内容'}
]
}
new Ext.TabPanel(config);
});
2.通过页面div自动添加标签页
/*通过页面div自动添加标签示例*/
Ext.onReady(function(){
var config = {
height:50,
width:300,
autoTabs:true, //自动扫描页面中的有效div然后转换为标签
deferredRender:false, //不进行延时渲染
//deferredRender:true,
activeTab:0, //默认激活第一个标签
animScroll:true, //使用动画滚动效果
enableTabScroll:true, //tab标签超宽时自动出现滚动条
applyTo:'panel' //此处必须使用applayTo定位
}
/*
自动扫描有效div转换为tab页
有效div:该div必须是在applyTo:'panel'中的div,且必须有正确的样式类,默认'x-tab',可通过autoTabSelector指定
*/
new Ext.TabPanel(config);
});
<div id="panel">
<div class="x-tab" title="tab标签页1">tab标签页1内容</div>
<div class="x-tab" title="tab标签页2">tab标签页2内容</div>
<div class="x-tab" title="tab标签页3">tab标签页3内容</div>
<div class="x-tab" title="tab标签页4">tab标签页4内容</div>
<div class="x-tab" title="tab标签页5">tab标签页5内容</div>
</div>
<div class="x-tab" title="tab标签页6">无效tab标签页6内容</div>
3.动态添加标签页
/*动态添加标签页*/
Ext.onReady(function(){
var config = {
height:150,
width:300,
activeTab:0, //默认激活第一个tab页
animScroll:true, //使用动画滚动效果
enableTabScroll:true, //tab标签超宽时自动出现滚动按钮
renderTo:'panel',
items:[
{title:'tab标签页1',html:'tab标签页1内容'}
],
//自动添加标签的按钮
buttons:[
{
text:'添加标签页',
handler:addTabPage //处理函数
}
]
}
var tabPanel = new Ext.TabPanel(config);
//添加tab页
function addTabPage()
{
var index = tabPanel.items.length + 1;
//创建新标签页
var tabPage = tabPanel.add({
title:'tab标签页' + index,
html:'tab标签页' + index + '内容',
closable:true //允许关闭该标签页
});
//设置当前显示的标签页
tabPanel.setActiveTab(tabPage);
}
});
分享到:
相关推荐
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
8.2.2 在FormPanel中使用TabPanel 229 8.2.3 DirectLoad与DirectSubmit 232 8.2.4 使用DirectSubmit上传文件 235 8.3 Grid组件 238 8.3.1 一个结合DataWrite和RowEditor的Grid示例 238 8.3.2 在CRUD操作中restful的...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
EXT的扩展控件,可以实现页签面板的拖动效果
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
六、面板Ext.Panel.............................................................................................................. 12 面板Panel 简介..........................................................
第二十七章:选项卡面板——Ext.TabPanel 214 一、关于魅族和M8 214 二、TabPanel概述 214 三、TabPanel标签操作 216 四、标签弹出菜单 217 五、小结 220 第二十八章:Viewport类 221 一、概述 221 二、Viewport的...
1. Ext.onReady函数:在EXTJS库文件及页面内容加载完后,EXTJS会执行Ext.onReady中指定的函数。 2. 控件的使用:使用EXTJS提供的控件,如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。 三、EXTJS控件 ...
extjs面板设计 var tabs = new Ext.TabPanel({ renderTo: 'tabs1', width:450, activeTab: 0, frame:true, defaults:{autoHeight: true}, items:[ {contentEl:'script', title: 'Short Text'}, {contentEl:'...
15 第三章 使用面板…………………………………………………………………………………………………………17 3.1 Panel……...面板TabPanel…………………………………………………………………………………………...
基于extjs 3.2,右侧折叠面板,然后面板里面包含了树,点击树节点以后,会把树的href里面的地址加载到右边的tabpanel。代码清晰简单。
19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 30)使用树控件...