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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
JS扩展方法实例分析
Apr 15 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
vue 动态组件用法示例小结
Mar 06 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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
单位速度在实战中的运用
2020/03/04 星际争霸
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php删除指定目录的方法
2015/04/03 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
使用Apache的rewrite
2021/03/09 Servers
js的逻辑运算符 ||
2010/05/31 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python常用小技巧总结
2015/06/01 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
护林防火标语
2014/06/27 职场文书
学校教师安全责任书
2014/07/23 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python