ExtJS扩展 垂直tabLayout实现代码


Posted in Javascript onJune 21, 2009

但ExtJS中的TabPanel只能水平显示,搜索了一下Ext论坛,发现有垂直TabLayout的扩展,但垂直tab的页签内容是水平显示的,且页签多了之后也不能通过设置enableScroll属性使其能滚动,为了适应项目的需求,本人对TabLayout进行了扩展,使其支持垂直页签显示,支持页签很多时的滚动。效果如下:
ExtJS扩展 垂直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属性时需要的两个滚动按钮图片
打包下载

Javascript 相关文章推荐
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
js有序数组的连接问题
Oct 01 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
Angular短信模板校验代码
Sep 23 Javascript
javascript 异常处理使用总结
Jun 21 #Javascript
js 匿名调用实现代码
Jun 19 #Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 #Javascript
JS 分号引起的一段调试问题
Jun 18 #Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 #Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 #Javascript
jquery 上下滚动广告
Jun 17 #Javascript
You might like
解析左右值无限分类的实现算法
2013/06/20 PHP
菜单效果
2006/10/14 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
vue如何判断dom的class
2018/04/26 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
python连接数据库的方法
2017/10/19 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python如何进行时间处理
2020/08/06 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
数据库面试要点基本概念
2013/10/31 面试题
一份报关员的职业规划范文
2014/01/08 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
《乌塔》教学反思
2014/02/17 职场文书
精神文明建设标语
2014/06/16 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
对讲机知识
2022/04/07 无线电