ExtJs4.2学习--Ext.tab.Panel 选项卡
1、基本标签的容器中。 TabPanels可以使用完全一样的标准Ext.panel.Panel布局的目的，但也有包含正在使用CardLayout布局管理器管理的子组件（项目）的特殊支持，并显示为单独的标签。先看看看官方的文档：
先看看一个简单的实例：
var tabs = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Home',
html: 'Home',
itemId: 'home'
}, {
title: 'Users',
html: 'Users',
itemId: 'users',
hidden: true
}, {
title: 'Tickets',
html: 'Tickets',
itemId: 'tickets'
}]
});
setTimeout(function(){
tabs.child('#home').tab.hide();
var users = tabs.child('#users');
users.tab.show();
tabs.setActiveTab(users);
}, 1000);
2、基本选项卡：
首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：
1.基本方式:通过定义html和items的方式。
2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。
3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。
另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：
页面html代码：
基本选项卡
js代码为：
//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 },
items: [{
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事件触发。');
}最后可以看到效果为：
3、操作选项卡：
选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：
html代码：
基本选项卡
操作选项卡
js全代码：
Ext.onReady(function () {
//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 },
items: [{
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事件触发。');
}
var index = 0;
//新增一个Tab
Ext.createWidget("button", {
text: "新增一个Tab",
renderTo: 'content2',
handler: function () {
tabs1.add({
title: '新Tab ' + (++index),
id: "newTab" + index,
html: '选项卡文本部分 ' + (index) + '
',
closable: true
});
}
});
//插入一个Tab
Ext.createWidget("button", {
text: "在2号位置插入新Tab",
renderTo: 'content2',
handler: function () {
tabs1.insert(2, {
title: '新Tab ' + (++index),
id: "newTab" + index,
html: '选项卡文本部分 ' + (index) + '
',
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);
}
});
});最后的效果为：
