版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
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}}]});//下面是添加新標簽頁的關(guān)鍵代碼,很簡單方便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),關(guān)鍵就是我們不好判斷這個索引,所以只好設(shè)置個遞增的全局變量indexnewtabnewtab了,也就容易激活了。而且我們可以通過下圖看出來。tabpanel(官方的例子)效果圖:我就不多說了,關(guān)鍵的幾個參數(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ù),關(guān)鍵的地方,非常簡單也非常實用functionaddTab(){tabsDemo.add({title:"newtab",id:"newtab"+index,html:"newtab"+index,closable:true});tabsDemo.setActiveTab("newtab"+index);index++;}//設(shè)置一個按鈕(上面的是一個鏈接,應(yīng)用有點不同哦)newExt.Button({text:"添加新標簽頁",handler:addTab}).render(document.body,"AddBtn");});tabpanel標簽頁添加右鍵菜單效果圖:點擊"關(guān)閉其他所有頁"后,//幾個參數(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,//下面是比上面例子新增的關(guān)鍵右鍵菜單代碼listeners:{//傳進去的三個參數(shù)分別為:tabpanel(tabsDemo),當前標簽頁,事件對e"contextmenu":function(tdemo,myitem,e){menu=newExt.menu.Menu([{text:"關(guān)閉當前頁",handler:function(){tdemo.remove(myitem);}},{text:"關(guān)閉其他所有頁",handler:function(){//循環(huán)遍歷tdemo.items.each(function(item){if(item.closable&&item!=myitem){},{
}});}
//可以關(guān)閉的其他所有標簽頁全部關(guān)掉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. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- web工程技術(shù)課程設(shè)計
- 2024年變電站保護測控裝置項目資金籌措計劃書代可行性研究報告
- 2023年紡織片梭織機資金申請報告
- 人音版 三年級上冊《放牛山歌》教案
- 人教版物理八年級上冊 5.5 顯微鏡和望遠鏡 教案
- 11項鏈 教學設(shè)計()
- 默寫練習試題-2024-2025學年統(tǒng)編版語文六年級上冊
- 2023-2024學年高中化學蘇教版2019選擇性必修3同步教案 1.2.1有機化合物的分離、提純
- 汽車整車運輸代理合同
- 音樂節(jié)咖啡廳裝飾合同范例
- 度客房培訓計劃表
- 遼寧醫(yī)院明細.xls
- 排球比賽記錄表
- 重大危險源旁站監(jiān)理制度和方案
- 明膠生產(chǎn)工藝流程
- 蘇教版小學六年級科學上冊《火山與地震》
- 增資擴股法律意見書
- 部編版小學語文四年級上冊第五單元《習作例文(我家的杏熟了)》第一課時課件
- 廣東省交通集團高速公路營運管理規(guī)范
- 軸對稱與坐標變化ppt課件
- 洗煤廠風險預控 表8-1 危險源辨識表
評論
0/150
提交評論