版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領
文檔簡介
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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五年影視剪輯師版權(quán)合作協(xié)議3篇
- 二零二五版白酒銷售顧問銷售數(shù)據(jù)分析與報告合同3篇
- 二零二五版木材廠土地租賃合同與林業(yè)產(chǎn)業(yè)發(fā)展規(guī)劃3篇
- 二零二五版國際IT產(chǎn)品代理銷售協(xié)議2篇
- 2025版小區(qū)公共區(qū)域保潔與綠化維護承包合同3篇
- 2025年三明貨運從業(yè)資格證好考嗎
- 二零二五版供應鏈融資高額抵押反擔保合同3篇
- 2025年度木門行業(yè)綠色生產(chǎn)與環(huán)保認證合同7篇
- 二零二五版林權(quán)抵押貸款合同糾紛調(diào)解機制與實務合同8篇
- 2025年度個人收入證明模板制作與品牌合作合同4篇
- 2024公路瀝青路面結(jié)構(gòu)內(nèi)部狀況三維探地雷達快速檢測規(guī)程
- 2024年高考真題-地理(河北卷) 含答案
- 中國高血壓防治指南(2024年修訂版)解讀課件
- 食材配送服務方案投標方案(技術方案)
- 足療店營銷策劃方案
- 封條(標準A4打印封條)
- 2024年北京控股集團有限公司招聘筆試參考題庫含答案解析
- 延遲交稿申請英文
- 運動技能學習與控制課件第十章動作技能的指導與示范
- 石油天然氣建設工程交工技術文件編制規(guī)范(SYT68822023年)交工技術文件表格儀表自動化安裝工程
- 中醫(yī)治療“濕疹”醫(yī)案72例
評論
0/150
提交評論