ExtJs4 笔记之Ext.tab.Panel 选项卡 - GT-Grid - ITeye群组
本篇讲解选项卡控件。
一、基本选项卡
首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：
1.基本方式:通过定义html和items的方式。
2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。
3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。
另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：
&h1&基本选项卡&/h1&
&div class="content" style="height: 150px"&
&div id="tabPanel"&
&div style="display: none"&
&div id="oneTab"&
&p&这个tab所展示的内容是读取至其他HTML标签&/p&
//1.基本的选项卡
var tabs1 = Ext.createWidget('tabpanel', {
renderTo: "tabPanel",
activeTab: 1,
//指定默认的活动tab
width: 600,
height: 120,
plain: true,
//True表示tab候选栏上没有背景图片（默认为false）
enableTabScroll: true,
//选项卡过多时，允许滚动
defaults: { autoScroll: true },
id: "tab1",
title: '普通Tab',
html: "这只是一个非常普通的Tab。",
items:[{xtype:'button',text:'按钮'}],
closable: true
//这个tab可以被关闭
id: "tab2",
title: '内容来至div',
contentEl: 'oneTab'
//指定了当前tab正文部分从哪个html元素读取
id: "tab3",
title: 'Ajax Tab',
autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }
id: "tab4",
title: '事件Tab',
listeners: { activate: handleActivate },
html: "带事件的Tab。"
id: "tab5",
title: '不可用Tab',
disabled: true,
html: "不可用的Tab，你是看不到我的。"
//单击tab4后触发的事件
function handleActivate(tab) {
alert(tab.title + ': activated事件触发。');
我们查看一下生成的选项卡效果：
二、操作选项卡
选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：
&h1&操作选项卡&/h1&
var index = 0;
//新增一个Tab
Ext.createWidget("button", {
text: "新增一个Tab",
renderTo: 'content2',
handler: function () {
tabs1.add({
title: '新Tab ' + (++index),
id: "newTab" + index,
html: '选项卡文本部分 ' + (index) + '&br/&&br/&',
closable: true
//插入一个Tab
Ext.createWidget("button", {
text: "在2号位置插入新Tab",
renderTo: 'content2',
handler: function () {
tabs1.insert(2, {
title: '新Tab ' + (++index),
id: "newTab" + index,
html: '选项卡文本部分 ' + (index) + '&br/&&br/&',
closable: true
//删除一个Tab
Ext.createWidget("button", {
text: "删除2号位置的Tab",
renderTo: 'content2',
handler: function () {
tabs1.remove(2);
//删除id为“tab1”的Tab
Ext.createWidget("button", {
text: "删除id为“tab1”的Tab",
renderTo: 'content2',
handler: function () {
tabs1.remove("tab1");
//删除id为“tab1”的Tab
Ext.createWidget("button", {
text: "设置第三个Tab为活动tab",
renderTo: 'content2',
handler: function () {
tabs1.setActiveTab(2);
三、选项卡按钮在下方
默认的选项卡按钮在上方，我们可以随意定义选项卡按钮的位置，下面代码演示了具体的用法：
&h1&选项卡按钮在下方&/h1&
//选项卡按钮在下方
var tabs3 = Ext.createWidget('tabpanel', {
renderTo: "content3",
activeTab: 0,
width: 600,
height: 150,
tabPosition: 'bottom'
//指定了选项卡的位置，left,right
for (var i = 0; i & 3; i++)
tabs3.add({
title: 'Tab ' + i,
id: "Tabs3_" + i,
html: '选项卡文本部分 ' + (index) + '&br/&&br/&',
closable: true
四、可拖动的选项卡
通过官方扩展包我们可以增强选项卡控件的易用性，比如现在我们可以实现一个可以拖动选项卡按钮的功能：
&h1&可拖动的选项卡&/h1&
//首先要动态加载ux扩展的js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.tab.Panel',
'Ext.ux.TabScrollerMenu',
'Ext.ux.TabReorderer',
'Ext.ux.TabCloseMenu',
'Ext.ux.GroupTabPanel'
//以下是功能代码
//可拖动的选项卡
var tabs4 = Ext.createWidget('tabpanel', {
renderTo: "content4",
activeTab: 0,
width: 600,
height: 150,
plugins: Ext.create('Ext.ux.TabReorderer'),
xtype: 'panel',
title: 'tab不可拖',
html: "这个选项卡不可被拖动",
reorderable: false,
closable: true
for (var i = 0; i & 3; i++)
tabs4.add({
title: 'Tab ' + i,
id: "Tabs4_" + i,
html: '选项卡文本部分 ' + (index) + '&br/&&br/&'
效果如下，可见一个tab已经被移动：
五、过多选项卡的菜单式展示
如果面板上的选项卡打开的过多而显示不下，那么需要对溢出的选项卡用菜单的方式展示出来，实现方式如下，注意要引入扩展的css样式：
&h1&过多选项卡的菜单式展示&/h1&
//选项卡过多溢出时菜单显示
var tabs5 = Ext.createWidget('tabpanel', {
margin-bottom: 0 margin-left: 38 padding-left: 10 border-left-width: 1 border-left-style: border-left-color: #d1d7 background-color: # lin18:28 提问
怎么把extjs 的TabPanel加入到自定义的div中
我自己在主页面jsp上布局了格式，想把他的TabPanel加到自己定义的div中。给出详细代码！谢谢
Ext.onReady(function(){
var centerRegion = new Ext.TabPanel({
region : 'center',
margins : '3 3 3 0',//距离top、right、bottom、left边界的距离,单位为像素
activeTab : 0,
defaults : {
autoScroll : true
items : [{
title : '主页',
html : '内容'
centerRegion.render('con');
var westRegion = new Ext.Panel({
title : '导航',
region : 'west',
split : true,
width : 200,
//True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
layout : 'accordion',
layoutConfig : {
titleCollapse : true,//单击标题就可以折叠面板
animate : true,//展开的效果
activeOnTop : true//是否可以改变顺序
items : []
new Ext.Viewport({
layout : 'border',
items : [{
region : 'north',
height : 100,
title : '顶部面板'
region : 'south',
height : 30,
title : '底部面板'
westRegion,
centerRegion]
以上是extjs的布局页面我只想要他的TabPanel控件，其余都不要
按赞数排序
主要就是用renderTo指向div的id就可以了
Ext.onReady(function() {
var tabPanel = new Ext.TabPanel({
renderTo: "div_tab",
activeTab: 0,
title: 'Tab 1',
html: 'A simple tab'
title: 'Tab 2',
html: 'Another one'
&div id="div_tab" style="background: #D97E27; width:800height:500"&
直接render到你的div里面就好了，其他代码删除
&div id="myPanel"&&/div&
Ext.onReady(function(){
var centerRegion = new Ext.TabPanel({
height:400,
region : 'center',
margins : '3 3 3 0',//距离top、right、bottom、left边界的距离,单位为像素
activeTab : 0,
defaults : {
autoScroll : true
items : [{
title : '主页',
html : '内容'
centerRegion.render('myPanel');
给你一个Html版本的吧，其实一样的：
&!DOCTYPE html&&br&
Ext.onReady(function() { &br&
var tabPanel = new Ext.TabPanel({&br&
renderTo: &div_tab&,&br&
activeTab: 0,&br&
items: [{&br&
title: 'Tab 1',&br&
html: 'A simple tab'&br&
title: 'Tab 2',&br&
html: 'Another one'&br&
刚发的代码有问题
&!DOCTYPE html&&br&
Ext.onReady(function() { &br&
var tabPanel = new Ext.TabPanel({&br&
renderTo: &div_tab&,&br&
activeTab: 0,&br&
items: [{&br&
title: 'Tab 1',&br&
html: 'A simple tab'&br&
title: 'Tab 2',&br&
html: 'Another one'&br&
是第三代的
其他相似问题ExtJS中如何设置tabpanel的tab的高度。默认情况下，tab的高度太矮了，以至于tab的标题底部字都被截掉了。
Hi，各位大虾，请问在ExtJS中如何设置tabpanel的tab的高度。默认情况下，tab的高度太矮了，以至于tab的标题底部字都被截掉了。
补充问题，我的TabPanel设置：
var frontMain = Ext.create('Ext.tab.Panel', {
id : &frontMain&,
region : &center&,
autoScroll : false,
activeTab : &index&,
defaults : {
layout : 'fit',
autoScroll : false,
iconCls : 'icon-tab-default',
bodyStyle : &margin:0;padding:0;width:100%;height:100%&,
items : [ {
itemId : &index&,
closable : false,
title : '首页',
tabConfig : {
tooltip : 'Tip:欢迎使用本系统',
iconCls : &icon-tab-home&
html : FastUtil.newIFrameHtml(&index&, &/portal.htm&),
tbar : createToolBar.call(window)
css 控制好字体
字体是用默认的，大小修改过了，原来11px的全部为12px，其它的大小没有改变，难道是这个原因？
增加配置：
tabBar : {
height : 28,
defaults : {
height : 28
但是有个新问题出来了，当前活动Tab下面的线还存在。
不知有其它办法没？
hi，你好，我也遇到同样的问题，想调整一下tab也签的高度，但是配置tabBar无效，不知道楼主该问题解决没，求助！
目前我设置这个是有效的
tabBar : {
&&&&height : 28,
&&&&defaults : {
&&&&&&&&height : 28扫二维码下载作业帮
1.75亿学生的选择
下载作业帮安装包
扫二维码下载作业帮
1.75亿学生的选择
Extjs使用方法添加TabPaneltabpanel.add({title:n.attributes.text,iconCls:'tabs',id:n.attributes.text,layout:'column',closable:true,autoScroll:true,items:new_work}).show();var new_work =Ext.Panel {xtype:'panel',items:[{.},{...}]};方法new_work不能使用布局,我的方法new_work不知道怎么了就是不能使用panel布局,用var new_work=Ext.TabPanel{itmes:[{.},{.}]}这个可以,就Panel不行
狮子爱哥864
扫二维码下载作业帮
1.75亿学生的选择
把你的new_work声明放到tabpanel.add前面.
为您推荐：
其他类似问题
扫描下载二维码Extjs兑现快捷键CTRL+TAB对Tabpanel进行Tab切换 - JavaScript当前位置:& &&&Extjs兑现快捷键CTRL+TAB对Tabpanel进行Tab切换Extjs兑现快捷键CTRL+TAB对Tabpanel进行Tab切换&&网友分享于：&&浏览：139次Extjs实现快捷键CTRL+TAB对Tabpanel进行Tab切换
// 注册ctrl+tab组合键到keymap
var keyMap=new Ext.KeyMap(Ext.getBody(),[{
key:[9], //tab
ctrl:true,
fn:function(){handleCtrlTab();}
scope:this,
defaultEventAction: "stopEvent"
keyMap.enable();
// 实现tabpanel的切换
function handleCtrlTab()
var targetTabPanel = Ext.getCmp('mytabpanel');
var curTab = targetTabPanel.getActiveTab();
var curIndex = targetTabPanel.items.indexOf(curTab);
var nextTabIndex = curIndex + 1;
var itemSize = targetTabPanel.items.
if (nextTabIndex &= itemSize)
nextTabIndex = 0;
var nextTab = targetTabPanel.items.itemAt(nextTabIndex);
targetTabPanel.activate(nextTab);
// 10ms进行聚焦，保证连续响应ctrl+tab
nextTab.focus(false, 10);
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有