ExtJs2.0學習系列(10)-Ext.TabPanel之第二式

ExtJs2.0學習系列(10)--Ext.TabPanel之第二式上一篇種我們簡單的了解了下tabpanel下面我們要介紹的是，如何動態(tài)的添加標簽頁！tabpanel的標簽頁效果圖:<bodystyle="margin:10px;"><div><aid="AddNewTab"<bodystyle="margin:10px;"><div><aid="AddNewTab"href="javascript:void(0)">添加新標簽頁</a></div></body>Ext.onReady(function(){Ext.QuickTips.init();Ext.onReady(function(){Ext.QuickTips.init();vartabsDemo=newExt.TabPanel({renderTo:Ext.getBody(),activeTab:0,height:700,frame:true,items:[{title:"autoLoadtitle:"autoLoad為html簡單頁面演示",autoLoad:{url:"tab1.htm",scripts:true}}]});//下面是添加新標簽頁的關鍵代碼,很簡單方便varindex=0;Ext.get("AddNewTab").on("click",function(){tabsDemo.add({title:"newtab",html:"newtab",closable:true});tabsDemo.setActiveTab("newtab"+index);index++;})});其實添加的話,其實添加的話,add()方法就可以了,但是我們還要激活這個新的標簽頁,setActiveTab(newtab的索引或id),關鍵就是我們不好判斷這個索引,所以只好設置個遞增的全局變量indexnewtabnewtab了，也就容易激活了。而且我們可以通過下圖看出來。tabpanel(官方的例子)效果圖:我就不多說了，關鍵的幾個參數(shù)注釋了下<<bodystyle="margin:10px;"><div><divid="AddBtn"></div></div></body>js代碼：Ext.onReady(Ext.onReady(function(){Ext.QuickTips.init();vartabsDemo=newExt.TabPanel({renderTo:Ext.getBody(),//resizeTabs:true,寬度能自動變化,但是影響標題的顯示activeTab:0,height:200,enableTabScroll:true,//擠的時候能夠滾動收縮width:200,frame:true,items:[{title:"tabadvantage",html:"sample1"}]});varvarindex=0;//就是下面這個函數(shù),關鍵的地方,非常簡單也非常實用functionaddTab(){tabsDemo.add({title:"newtab",id:"newtab"+index,html:"newtab"+index,closable:true});tabsDemo.setActiveTab("newtab"+index);index++;}//設置一個按鈕(上面的是一個鏈接,應用有點不同哦)newExt.Button({text:"添加新標簽頁",handler:addTab}).render(document.body,"AddBtn");});tabpanel標簽頁添加右鍵菜單效果圖：點擊"關閉其他所有頁"后,//幾個參數(shù)說明1.enableTabScroll://幾個參數(shù)說明1.enableTabScroll:true//前面已經(jīng)說過了2.listeners:{"contextmenu":function(參數(shù)1,參數(shù)2,參數(shù)3){ .}}//tabpanelpanlee3.//2，每個標簽頁都有激活和去激活事件activatedeactivate，他們的執(zhí)行函數(shù)有個參數(shù)，就是當前標簽頁。items:[{title:"tabadvantage",listeners:{deactivate:function(a){alert("刪除,a表示當前標簽頁");},activate:function(){alert("激活");}},},html:"sample1"}]4.menu=newExt.menu.Menu()//menu組件，就不多說了，后面會專門分析下，不過不要menu.showAt(e.getPoint())了Ext.onReady(function(){Ext.QuickTips.init();vartabsDemo=newExt.TabPanel({renderTo:Ext.getBody(),//resizeTabs:true,Ext.onReady(function(){Ext.QuickTips.init();vartabsDemo=newExt.TabPanel({renderTo:Ext.getBody(),//resizeTabs:true,寬度能自動變化,但是影響標題的顯示activeTab:0,height:200,enableTabScroll:true,//擠的時候能夠滾動收縮width:400,frame:true,//下面是比上面例子新增的關鍵右鍵菜單代碼listeners:{//傳進去的三個參數(shù)分別為:tabpanel(tabsDemo),當前標簽頁,事件對e"contextmenu":function(tdemo,myitem,e){menu=newExt.menu.Menu([{text:"關閉當前頁",handler:function(){tdemo.remove(myitem);}},{text:"關閉其他所有頁",handler:function(){//循環(huán)遍歷tdemo.items.each(function(item){if(item.closable&&item!=myitem){},{

}});}

//可以關閉的其他所有標簽頁全部關掉tdemo.remove(item);text:"新建標簽頁",handler:addTab}]);//顯示在當前位置menu.showAt(e.getPoint());}},items:[{title:"tabadvantage",html:"sample1"}]});varindex=0;functionaddTab(){tabsDemo.add({title:"ntab"+index,id:"newtab"+index,html:"new