快捷導(dǎo)航

ExtJS擴展垂直tabLayout實現(xiàn)代碼

更新時間：2009年06月21日 23:41:02 作者：

最近在做一個項目時，項目中使用了ExtJS，有些內(nèi)容要分頁簽顯示，而出于項目要求，頁簽只能垂直分布

但ExtJS中的TabPanel只能水平顯示，搜索了一下Ext論壇，發(fā)現(xiàn)有垂直TabLayout的擴展，但垂直tab的頁簽內(nèi)容是水平顯示的，且頁簽多了之后也不能通過設(shè)置enableScroll屬性使其能滾動，為了適應(yīng)項目的需求，本人對TabLayout進行了擴展，使其支持垂直頁簽顯示，支持頁簽很多時的滾動。效果如下：

該組件有兩種使用方式，一是擴展方式，二是復(fù)寫方式。其中第一種方式需要引入附件中的TabPanel.js以及ext-patch.css，同時需要將兩個圖片放在ext-patch.css同目錄下，在創(chuàng)建組件時需要創(chuàng)建Ext.ux.TabPanel；
例：

復(fù)制代碼代碼如下:

aa = new Ext.ux.TabPanel({ 
tabPosition: 'left', 
autoScroll: true, 
deferredRender: false, 
activeTab: 0, 
enableTabScroll: true, 
applyTo: 'aaa', 
items: [ 
bb = new Ext.Panel({layout:'fit', 
title:'基礎(chǔ)資料', 
iconCls:'aaa', 
closable: true, 
html: '基礎(chǔ)資料' 
}),cc = new Ext.Panel({layout:"fit", 
title:"基礎(chǔ)資料", 
closable: true, 
html: '基礎(chǔ)資料' 
})] 
});

第二種方式需要引入附件中的TabPanel2.js以及ext-patch.css，同時需要將兩個圖片放在ext-patch.css同目錄下，在創(chuàng)建組件時需要創(chuàng)建Ext.TabPanel。
例：

復(fù)制代碼代碼如下:

aa = new Ext.TabPanel({ 
tabPosition: 'left', 
autoScroll: true, 
deferredRender: false, 
activeTab: 0, 
enableTabScroll: true, 
applyTo: 'aaa', 
items: [ 
bb = new Ext.Panel({layout:'fit', 
title:'基礎(chǔ)資料', 
iconCls:'aaa', 
closable: true, 
html: '基礎(chǔ)資料' 
}),cc = new Ext.Panel({layout:"fit", 
title:"基礎(chǔ)資料", 
closable: true, 
html: '基礎(chǔ)資料' 
})] 
});

兩種使用方式展現(xiàn)效果相同，tabPosition屬性同時支持top/right/bottom/left。

附件文件說明：
TabPanel.js 擴展Ext.TabPanel
TabPanel2.js 復(fù)寫Ext.TabPanel中的相關(guān)方法
ext-patch.css 本文組件所使用的css
*.gif 為設(shè)置了enableScroll屬性時需要的兩個滾動按鈕圖片
打包下載

您可能感興趣的文章: