[转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
本篇讲解选项卡控件。
一、基本选项卡
首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取:
1.基本方式:通过定义html和items的方式。
2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。
3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。
另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码:
[html]
<h1>基本选项卡</h1>
<div class="content" style="height: 150px">
<div id="tabPanel">
<div style="display: none">
<div id="oneTab">
<p>这个tab所展示的内容是读取至其他HTML标签</p>
</div>
</div>
</div>
</div>
[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事件触发。');
}
我们查看一下生成的选项卡效果:
二、操作选项卡
选项卡生成后,我们可以通过js去操作它,比如动态新增、删除、插入选项卡,设置活动选项卡等,我们看看具体实现方法:
[html]
<h1>操作选项卡</h1>
<div class="content" id="content2"></div>
[Js]
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);
}
});
效果:
三、选项卡按钮在下方
默认的选项卡按钮在上方,我们可以随意定义选项卡按钮的位置,下面代码演示了具体的用法:
[html]
<h1>选项卡按钮在下方</h1>
<div class="content" id="content3"></div>
[Js]
//选项卡按钮在下方
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
});
效果:
四、可拖动的选项卡
通过官方扩展包我们可以增强选项卡控件的易用性,比如现在我们可以实现一个可以拖动选项卡按钮的功能:
[html]
<h1>可拖动的选项卡</h1>
<div class="content" id="content4"></div>
[Js]
//首先要动态加载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'),
items: [{
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样式:
[html]
<h1>过多选项卡的菜单式展示</h1>
<div class="content" id="content5"></div>
[Js]
//选项卡过多溢出时菜单显示
var tabs5 = Ext.createWidget('tabpanel', {
renderTo: "content5",
activeTab: 0,
width: 600,
height: 150,
plugins: Ext.create('Ext.ux.TabScrollerMenu', {
maxText: 15,
pageSize: 5
}),
items: [{
title: 'tab0',
html: '第一个tab'
}]
});
Ext.defer(function () {
var myTabs = [];
for (var i = 0; i < 15; i++) {
myTabs.push({
title: 'Tab ' + i,
id: "Tabs5_" + i,
html: '选项卡文本部分 ' + (index) + '<br/><br/>'
});
}
tabs5.add(myTabs);
}, 1000);
效果:
六、选项卡的右键菜单
一般的应用程序都支持在选项卡按钮上面通过右键的方式去关闭多余的选项卡,在ext中也可以做到,实现方法如下:
[html]
<h1>选项卡的右键菜单</h1>
<div class="content" id="content6"></div>
[Js]
//选项卡的右键菜单
var currentItem;
var tabs6 = Ext.createWidget('tabpanel', {
renderTo: "content6",
activeTab: 0,
width: 600,
height: 150,
plugins: Ext.create('Ext.ux.TabCloseMenu', {
closeTabText: '关闭当前',
closeOthersTabsText: '关闭其他',
closeAllTabsText: '关闭所有',
extraItemsTail: [
'-',
{
text: '可关闭',
checked: true,
hideOnClick: true,
handler: function (item) {
currentItem.tab.setClosable(item.checked);
}
}
],
listeners: {
aftermenu: function () {
currentItem = null;
},
beforemenu: function (menu, item) {
var menuitem = menu.child('*[text="可关闭"]');
currentItem = item;
menuitem.setChecked(item.closable);
}
}
}),
items: [{
title: 'tab1',
html: '第一个tab'
}, {
title: 'tab2',
closable: true,
html: '第二个tab'
}, {
title: 'tab3',
closable: true,
html: '第三个tab'
}]
});
效果:
七、分组式选项卡
我们还可以对选项卡进行分组,具体实现如下:
[html]
<h1>分组式选项卡</h1>
<div class="content" id="content7"></div>
[Js]
//分组式选项卡
var tabs7 = Ext.create('Ext.ux.GroupTabPanel', {
activeGroup: 0, //设置当前活动的分组
items: [{
expanded: false,
mainItem: 1, //设置主要的item,这个tab会在最上面,以文件夹方式展示出来。
items: [{
title: '项目1',
html: "<b>第一组第一项正文。</b>"
}, {
title: '项目2',
border: false,
html: "<b>第一组第二项正文。</b>"
}, {
title: '项目3',
border: false,
html: "<b>第一组第三项正文。</b>"
}]
}, {
expanded: true,
items: [{
title: '项目1',
html: "<b>第二组第一项正文。</b>"
}, {
title: '项目2',
html: "<b>第二组第二项正文。</b>"
}]
}]
});
Ext.create('Ext.Panel', {
renderTo: "content7",
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '分组tab演示',
items: tabs7
});
效果:
[转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡的更多相关文章
- ExtJs4 笔记(10) Ext.tab.Panel 选项卡
本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...
- ExtJS 4 在Ext.tab.Panel中使用Ext.ux.IFrame打开url指向的网页
ext-4.2.1.883\examples\ux\IFrame.js ext-4.2.1.883\examples\ux\TabCloseMenu.js 复制到 \Scripts\ext-4.2.1 ...
- [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引 ...
- [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图
本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的 Ext GridPanel的前身,不过现在的Ext4已经将它整合 ...
- [转载]ExtJs4 笔记(7) Ext.tip.ToolTip 提示
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(6) Ext.MessageBox 消息对话框
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法 ...
随机推荐
- trie树---(插入、删除、查询字符串)
HDU 5687 Problem Description 度熊手上有一本神奇的字典,你可以在它里面做如下三个操作: 1.insert : 往神奇字典中插入一个单词 2.delete: 在神奇字 ...
- java.util.TimeZone 新加方法 getTimeZone(ZoneId zoneId) 导致的问题
最近接受的项目中用spring配置了一个TimeZone对象: <bean id ="timeZone4Job" class="java.util.TimeZone ...
- ASP.NET页面动态添加js脚本
有时我们需要生成自己的JavaScript代码并在运行时动态添加到页面,接下来我们来看一下如何将生成的JavaScript代码动态添加到ASP.NET页面. 为了添加脚本,要将自定义的脚本在一个字符串 ...
- “连不上 ArcGIS License Manager ”的一点常用诊断方法
在 ArcGIS Desktop 的问题库中,有一类不算做核心技术问题,但却可能会位列“最常见的问题”之一.简言之一句话,”许可服务器连不上怎么办?!“ 下面就来演绎下问题的诊断过程. 本文仅适用于客 ...
- SharePoint 2013 中的SQL Server 安全
使用SharePoint很长时间以来,都认为Sql只需要最初始的配置,即不再需要管理和维护:而事实上,Sql的管理和安全,都是和SharePoint环境的稳定性息息相关的,所以,要绝对重视ShareP ...
- sharepoint 2013 文件“/_controltemplates/SPMRB/AllStatBookingsForm.ascx”不存在
现象: 文件“/_controltemplates/SPMRB/AllStatBookingsForm.ascx”不存在. 分析: 此代码在sp2010好用,但是在sp2013则报以上错误. 解决办法 ...
- 微信html5开发选哪一个
html5选哪个开发框架 ①. Justep起步 X5框架 : 专门用来开发web App的大型开发工具集,x5 v3.0有765.58M,不选. ②.Jquery Mobile ...
- 使用VideoView自定义一个播放器控件
介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...
- 蓝牙Ibeacon室内定位和微信摇一摇周边原理分析
苹果推出Ibeacon室内定位技术是为了弥补GPS无法覆盖室内定位这种场景.苹果意味着创新,在其推动下,蓝牙Ibeacon得到了极大的应用.而腾讯则是利用蓝牙Ibeacon在场景体验方面进行了创新,实 ...
- ReactiveCocoa中信号的使用
前言: 很早之前就有看过ReactiveCocoa,那会看的时候知道是一个新的框架关于响应式编程,具体什么也没有深入研究,今天也对ReactiveCocoa这个框架的使用进行了一定的了解.在githu ...