ExtJS擴充 垂直tabLayout實現代碼

但ExtJS中的TabPanel只能水平顯示，搜尋了一下Ext論壇，發現有垂直TabLayout的擴充，但垂直tab的頁簽內容是水平顯示的，且頁簽多了之後也不能通過設定enableScroll屬性使其能滾動，為了適應項目的需求，本人對TabLayout進行了擴充，使其支援垂直頁簽顯示，支援頁簽很多時的滾動。效果如下：

該組件有兩種使用方式，一是擴充方式，二是複寫方式。其中第一種方式需要引入附件中的TabPanel.js以及ext-patch.css，同時需要將兩個圖片放在ext-patch.css同目錄下，在建立組件時需要建立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:'基礎資料',
iconCls:'aaa',
closable: true,
html: '基礎資料'
}),cc = new Ext.Panel({layout:"fit",
title:"基礎資料",
closable: true,
html: '基礎資料'
})]
});

第二種方式需要引入附件中的TabPanel2.js以及ext-patch.css，同時需要將兩個圖片放在ext-patch.css同目錄下，在建立組件時需要建立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:'基礎資料',
iconCls:'aaa',
closable: true,
html: '基礎資料'
}),cc = new Ext.Panel({layout:"fit",
title:"基礎資料",
closable: true,
html: '基礎資料'
})]
});

兩種使用方式展現效果相同，tabPosition屬性同時支援top/right/bottom/left。

附件檔案說明：
TabPanel.js 擴充Ext.TabPanel
TabPanel2.js 複寫Ext.TabPanel中的相關方法
ext-patch.css 本文組件所使用的css
*.gif 為設定了enableScroll屬性時需要的兩個滾動按鈕圖片
打包下載