群组首页 → Web前端 → GT-Grid → 论坛
发表回复

ExtJs4 笔记之Ext.tab.Panel 选项卡

agevs 2014-10-14

本篇讲解选项卡控件。

一、基本选项卡

首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：

1.基本方式:通过定义html和items的方式。

2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。

3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。

另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：可以500%提高开发效率的前端UI框架！

.代码  收藏代码
  1. <h1>基本选项卡</h1>   
  2. <div class="content" style="height: 150px">  
  3.     <div id="tabPanel">  
  4.         <div style="display: none">  
  5.             <div id="oneTab">  
  6.                 <p>这个tab所展示的内容是读取至其他HTML标签</p>  
  7.             </div>  
  8.         </div>  
  9.     </div>  
 
.代码  收藏代码
  1. //1.基本的选项卡  
  2. var tabs1 = Ext.createWidget('tabpanel', {  
  3.     renderTo: "tabPanel",  
  4.     activeTab: 1,                       //指定默认的活动tab  
  5.     width: 600,  
  6.     height: 120,  
  7.     plain: true,                        //True表示tab候选栏上没有背景图片（默认为false）  
  8.     enableTabScroll: true,              //选项卡过多时，允许滚动  
  9.     defaults: { autoScroll: true },  
  10.     items: [{  
  11.         id: "tab1",  
  12.         title: '普通Tab',  
  13.         html: "这只是一个非常普通的Tab。",  
  14.         items:[{xtype:'button',text:'按钮'}],  
  15.         closable: true                  //这个tab可以被关闭  
  16.     }, {  
  17.         id: "tab2",  
  18.         title: '内容来至div',  
  19.         contentEl: 'oneTab'             //指定了当前tab正文部分从哪个html元素读取  
  20.     }, {  
  21.         id: "tab3",  
  22.         title: 'Ajax Tab',  
  23.         autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }  
  24.     }, {  
  25.         id: "tab4",  
  26.         title: '事件Tab',  
  27.         listeners: { activate: handleActivate },  
  28.         html: "带事件的Tab。"  
  29.     }, {  
  30.         id: "tab5",  
  31.         title: '不可用Tab',  
  32.         disabled: true,  
  33.         html: "不可用的Tab，你是看不到我的。"  
  34.     }]  
  35. });  
  36. //单击tab4后触发的事件  
  37. function handleActivate(tab) {  
  38.     alert(tab.title + ': activated事件触发。');  
  39. }  
 

我们查看一下生成的选项卡效果：可以500%提高开发效率的前端UI框架！

二、操作选项卡

选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：

.代码  收藏代码
  1. <h1>操作选项卡</h1>  

 

 

.代码  收藏代码
  1. var index = 0;  
  2.      
  3. //新增一个Tab  
  4. Ext.createWidget("button", {  
  5.     text: "新增一个Tab",  
  6.     renderTo: 'content2',  
  7.     handler: function () {  
  8.         tabs1.add({  
  9.             title: '新Tab ' + (++index),  
  10.             id: "newTab" + index,  
  11.             html: '选项卡文本部分 ' + (index) + '<br/><br/>',  
  12.             closable: true  
  13.         });  
  14.     }  
  15. });  
  16.      
  17. //插入一个Tab  
  18. Ext.createWidget("button", {  
  19.     text: "在2号位置插入新Tab",  
  20.     renderTo: 'content2',  
  21.     handler: function () {  
  22.         tabs1.insert(2, {  
  23.             title: '新Tab ' + (++index),  
  24.             id: "newTab" + index,  
  25.             html: '选项卡文本部分 ' + (index) + '<br/><br/>',  
  26.             closable: true  
  27.         });  
  28.     }  
  29. });  
  30.      
  31. //删除一个Tab  
  32. Ext.createWidget("button", {  
  33.     text: "删除2号位置的Tab",  
  34.     renderTo: 'content2',  
  35.     handler: function () {  
  36.         tabs1.remove(2);  
  37.     }  
  38. });  
  39.      
  40. //删除id为“tab1”的Tab  
  41. Ext.createWidget("button", {  
  42.     text: "删除id为“tab1”的Tab",  
  43.     renderTo: 'content2',  
  44.     handler: function () {  
  45.         tabs1.remove("tab1");  
  46.     }  
  47. });  
  48.      
  49. //删除id为“tab1”的Tab  
  50. Ext.createWidget("button", {  
  51.     text: "设置第三个Tab为活动tab",  
  52.     renderTo: 'content2',  
  53.     handler: function () {  
  54.         tabs1.setActiveTab(2);  
  55.     }  
 

效果：可以500%提高开发效率的前端UI框架！

三、选项卡按钮在下方

默认的选项卡按钮在上方，我们可以随意定义选项卡按钮的位置，下面代码演示了具体的用法：

.代码  收藏代码
  1. <h1>选项卡按钮在下方</h1>  

 

 

.代码  收藏代码
  1. //选项卡按钮在下方  
  2. var tabs3 = Ext.createWidget('tabpanel', {  
  3.     renderTo: "content3",  
  4.     activeTab: 0,  
  5.     width: 600,  
  6.     height: 150,  
  7.     tabPosition: 'bottom'           //指定了选项卡的位置，left,right  
  8. });  
  9. for (var i = 0; i < 3; i++)  
  10.     tabs3.add({  
  11.         title: 'Tab ' + i,  
  12.         id: "Tabs3_" + i,  
  13.         html: '选项卡文本部分 ' + (index) + '<br/><br/>',  
  14.         closable: true  
 

效果：

四、可拖动的选项卡

通过官方扩展包我们可以增强选项卡控件的易用性，比如现在我们可以实现一个可以拖动选项卡按钮的功能：

.代码  收藏代码
  1. <h1>可拖动的选项卡</h1>  

 

 

.代码  收藏代码
  1. //首先要动态加载ux扩展的js  
  2. Ext.Loader.setConfig({enabled: true});  
  3. Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');  
  4. Ext.require([  
  5.     'Ext.tip.QuickTipManager',  
  6.     'Ext.tab.Panel',  
  7.     'Ext.ux.TabScrollerMenu',  
  8.     'Ext.ux.TabReorderer',  
  9.     'Ext.ux.TabCloseMenu',  
  10.     'Ext.ux.GroupTabPanel'  
  11. ]);  
  12.      
  13.      
  14. //以下是功能代码  
  15.      
  16.     //可拖动的选项卡  
  17.     var tabs4 = Ext.createWidget('tabpanel', {  
  18.         renderTo: "content4",  
  19.         activeTab: 0,  
  20.         width: 600,  
  21.         height: 150,  
  22.         plugins: Ext.create('Ext.ux.TabReorderer'),  
  23.         items: [{  
  24.             xtype: 'panel',  
  25.             title: 'tab不可拖',  
  26.             html: "这个选项卡不可被拖动",  
  27.             reorderable: false,  
  28.             closable: true  
  29.         }]  
  30.     });  
  31.     for (var i = 0; i < 3; i++)  
  32.         tabs4.add({  
  33.             title: 'Tab ' + i,  
  34.             id: "Tabs4_" + i,  
  35.             html: '选项卡文本部分 ' + (index) + '<br/><br/>'  
 

 

效果如下，可见一个tab已经被移动：

五、过多选项卡的菜单式展示

如果面板上的选项卡打开的过多而显示不下，那么需要对溢出的选项卡用菜单的方式展示出来，实现方式如下，注意要引入扩展的css样式： 可以500%提高开发效率的前端UI框架！

.代码  收藏代码
  1. <h1>过多选项卡的菜单式展示</h1>  

 

 

.代码  收藏代码
  1. //选项卡过多溢出时菜单显示  
  2. var tabs5 = Ext.createWidget('tabpanel', {  
  3. margin-bottom: 0px; margin-left: 38px; padding-left: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: #d1d7dc; background-color: #fafafa; lin
发表回复
Global site tag (gtag.js) - Google Analytics