但ExtJS中的TabPanel只能水平顯示，搜索了一下Ext論壇，發(fā)現(xiàn)有垂直TabLayout的擴(kuò)展，但垂直tab的頁(yè)簽內(nèi)容是水平顯示的，且頁(yè)簽多了之后也不能通過設(shè)置enableScroll屬性使其能滾動(dòng)，為了適應(yīng)項(xiàng)目的需求，本人對(duì)TabLayout進(jìn)行了擴(kuò)展，使其支持垂直頁(yè)簽顯示，支持頁(yè)簽很多時(shí)的滾動(dòng)。效果如下：
該組件有兩種使用方式，一是擴(kuò)展方式，二是復(fù)寫方式。其中第一種方式需要引入附件中的TabPanel.js以及ext-patch.css，同時(shí)需要將兩個(gè)圖片放在ext-patch.css同目錄下，在創(chuàng)建組件時(shí)需要?jiǎng)?chuàng)建Ext.ux.TabPanel；
例：
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，同時(shí)需要將兩個(gè)圖片放在ext-patch.css同目錄下，在創(chuàng)建組件時(shí)需要?jiǎng)?chuàng)建Ext.TabPanel。
例：
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屬性同時(shí)支持top/right/bottom/left。
附件文件說明：
TabPanel.js 擴(kuò)展Ext.TabPanel
TabPanel2.js 復(fù)寫Ext.TabPanel中的相關(guān)方法
ext-patch.css 本文組件所使用的css
*.gif 為設(shè)置了enableScroll屬性時(shí)需要的兩個(gè)滾動(dòng)按鈕圖片
打包下載
