Ext TabPanel学习(2)-动态添加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代码：


   

        添加新标签页
   

简要说明：
其实添加的话,只要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代码：

   

       

   

• 
• 大小: 5.7 KB

• 
• 大小: 26.7 KB

• 
• 大小: 3.6 KB

• 
• 大小: 5.1 KB

• 
• 大小: 33.7 KB

• 
• 大小: 3.7 KB

• 查看图片附件