extjs4中操作选项卡用法

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：代码如下 [html] h1操作选项卡/h1 div class=content id=content2/div [

选项卡生成后，我们可以通过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);
        }
    });

效果：