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代码:

基本选项卡

这个tab所展示的内容是读取至其他HTML标签

js代码为:

            //1.基本的选项卡
            var tabs1 = Ext.createWidget('tabpanel', {//createWidget使用别名来创建对象
                renderTo: "tabPanel",
                activeTab: 0,                       //指定默认的活动tab(后面的数字相当于下标)
                width: 600,
                height: 120,
                plain: true,                        //True表示tab候选栏上没有背景图片(默认为false)
                enableTabScroll: true,              //选项卡过多时,允许滚动
                defaults: { autoScroll: true },     //defaults:设置所有的子组件; autoScroll:超出出现滚动条
                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事件触发。');
            }

最后可以看到效果为:

Ext.tab.Panel 选项卡_第1张图片

3、操作选项卡:

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

html代码:

基本选项卡

这个tab所展示的内容是读取至其他HTML标签

操作选项卡

 js全代码:

       Ext.onReady(function(){

            //1.基本的选项卡
            var tabs1 = Ext.createWidget('tabpanel', {//createWidget使用别名来创建对象
                renderTo: "tabPanel",
                activeTab: 0,                       //指定默认的活动tab(后面的数字相当于下标)
                width: 600,
                height: 120,
                plain: true,                        //True表示tab候选栏上没有背景图片(默认为false)
                enableTabScroll: true,              //选项卡过多时,允许滚动
                defaults: { autoScroll: true },     //defaults:设置所有的子组件; autoScroll:超出出现滚动条
                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, { //添加容器到指定的位置,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); //删除下标为2的 } }); //删除id为“tab1”的Tab Ext.createWidget("button", { text: "删除id为“tab1”的Tab", renderTo: 'content2', handler: function () { tabs1.remove("tab1"); //删除id为tab1的 } }); //删除id为“tab1”的Tab Ext.createWidget("button", { text: "设置第三个Tab为活动tab", renderTo: 'content2', handler: function () { tabs1.setActiveTab(2); } }); });

最后的效果为:

Ext.tab.Panel 选项卡_第2张图片

你可能感兴趣的:(ExtJS基础类)