但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属性时需要的两个滚动按钮图片
打包下载