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

　　推荐阅读

　　JS 分号引起的一段调试问题

来看一下下面的代码: var a=textbox1.text; var b=5; if(a<b);//如果用户输入的值小于5,就取5 { a=b; } 看看执行后有什么效果,无论textbox1.text是什么值,都会时放条件判断.为什么呢.有没有什么发现. 原来在写代码>>>详细阅读

本文标题：ExtJS扩展 垂直tabLayout实现代码

地址：http://www.17bianji.com/kaifa2/JS/28563.html

 1/2    1