繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > ExtJS扩展 垂直tabLayout实现代码
- Javascript
- 推荐js实现商品分类到搜索栏友好提示（人机交互）
- attachEvent的使用方法与传递参数[IE|firefox]
- 用javascript实现鼠标框选
- 一个不错的动感导航菜单
- JavaScript网页制作特殊效果用随机数
- 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera
- js实现的的 文字自动''到google search框
- JS值当前DIV的ID值的代码
- 在javascript中，如果删除二维数组中重复的元素
- 一个用js实现的页内搜索代码
- 不用MOUSEMOVE也能滑动啊
- asp 的 分词实现代码
- 更正确的asp冒泡排序
- 用Javscript实现表单复选框的全选功能
- 向fckeditor编辑器插入指定代码的方法
- javascript实现 在光标处插入指定内容
- 如何实现动态删除javascript函数
- javascript父子通信
- JS获取scrollHeight问题想到的标准问题
- 從博客網扣了一個效果出來
Javascript 中的 ExtJS扩展 垂直tabLayout实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 428 ::
收藏到网摘: n/a
最近在做一个项目时，项目中使用了ExtJS，有些内容要分页签显示，而出于项目要求，页签只能垂直分布 但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属性时需要的两个滚动按钮图片
打包下载
评论 (0) All
