Ext TabPanel学习(2)-动态添加TabPanel标签

最新推荐文章于 2021-02-25 01:26:44 发布

原创最新推荐文章于 2021-02-25 01:26:44 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #TabPanel #动态添加TabPanel标签

Ext 学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用ExtJS实现动态添加TabPanel，并通过实例展示了如何添加新的标签页及设置其为活动状态。同时，还提供了调整TabPanel宽度及启用滚动功能的方法。

1)、动态添加TabPanel标签
效果图

[img]http://dl2.iteye.com/upload/attachment/0087/3623/63f28aa2-fa06-3b5a-8dff-1163f1830325.png[/img]

js代码：
Ext.onReady(function(){
    Ext.QuickTips.init();
    var tabsDemo = new Ext.TabPanel({
        renderTo:Ext.getBody(),
        activeTab:0,
        height:700,
        frame:true,
        items:[{
            title:'autoLoad为html简单页面演示',
            html:'原来就有的标签页面',
            autoLoad:{url:'tab1.htm',scripts:true}
        }]
    });
    var index = 0;
    Ext.get("newTab").on("click",function(){
        tabsDemo.add({
            title:'new tab',
            id:'newtab'+index,
            html:"newtab标签页面",
            closable:true
        });
        tabsDemo.setActiveTab("newtab"+index);//设置新添加的标签为激活标签
        index++;
    });
})

html代码：

<body>
    <div>
        <a id="newTab" href="javascript:void(0)">添加新标签页</a>
    </div>
</body>

简要说明：
其实添加的话,只要add()方法就可以了,但是我们还要激活这个新的标签页,就必须setActiveTab(newtab的索引或id),
关键就是我们不好判断这个索引,所以只好设置个递增的全局变量index来给newtab取名，
这样我们也就能准确的获取新的不重复的newtab了，也就容易激活了

2)、对上面的例子进行稍微修改
效果图：

[img]http://dl2.iteye.com/upload/attachment/0087/3640/2691b582-5f5d-3cb5-8845-881136206466.png[/img]

js代码：

Ext.onReady(function(){
    Ext.QuickTips.init();
    var tabsDemo = new Ext.TabPanel({
        renderTo:Ext.getBody(),
//        resizeTabs:true,//宽度能自动变化，但是会影响标题的显示
        activeTab:0,
        height:200,
        enableTabScroll:true,//挤的时候能够滚动收缩
        width:200,
        frame:true,
        items:[{
            title:'页面演示',
            html:'原来就有的标签页面',
        }]
    });
    var index = 0;
    function addTabs(){
        tabsDemo.add({
            title:'new tab',
            id:'newtab'+index,
            html:"newtab标签页面"+index,
            closable:true
        });
        tabsDemo.setActiveTab("newtab"+index);//设置新添加的标签为激活标签
        index++;
    };
    //设置一个按钮(上面的是一个链接)
    new Ext.Button({
        text:'添加新标签页',
        handler:addTabs
    }).render(document.body,"addBtn");
})

html代码：
<body>
    <div>
        <div id="addBtn"></div>
    </div>
</body>