ExtJS扩展 垂直tabLayout实现代码
2009-06-21 00:00
477 查看
但ExtJS中的TabPanel只能水平显示,搜索了一下Ext论坛,发现有垂直TabLayout的扩展,但垂直tab的页签内容是水平显示的,且页签多了之后也不能通过设置enableScroll属性使其能滚动,为了适应项目的需求,本人对TabLayout进行了扩展,使其支持垂直页签显示,支持页签很多时的滚动。效果如下:
该组件有两种使用方式,一是扩展方式,二是复写方式。其中第一种方式需要引入附件中的TabPanel.js以及ext-patch.css,同时需要将两个图片放在ext-patch.css同目录下,在创建组件时需要创建Ext.ux.TabPanel;
例:
第二种方式需要引入附件中的TabPanel2.js以及ext-patch.css,同时需要将两个图片放在ext-patch.css同目录下,在创建组件时需要创建Ext.TabPanel。
例:
两种使用方式展现效果相同,tabPosition属性同时支持top/right/bottom/left。
附件文件说明:
TabPanel.js 扩展Ext.TabPanel
TabPanel2.js 复写Ext.TabPanel中的相关方法
ext-patch.css 本文组件所使用的css
*.gif 为设置了enableScroll属性时需要的两个滚动按钮图片
打包下载
该组件有两种使用方式,一是扩展方式,二是复写方式。其中第一种方式需要引入附件中的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属性时需要的两个滚动按钮图片
打包下载
相关文章推荐
- Extjs中TabPane如何嵌套在其他网页中实现思路及代码
- 简单代码实现TabLayout 条目的图文混排
- 三行代码实现 TabLayout+ViewPager 的 Tab 滑动效果,从封装到开源
- Android TabLayout 实现底部Tab的示例代码
- 垂直的TabLayout代码案例
- Android TabActivity 全套代码(结合Layout XML文件实现)
- Extjs中TabPane如何嵌套在其他网页中实现思路及代码
- 三行代码实现TabLayout+ViewPager的Tab滑动效果,从封装到开源
- extjs tabpanel限制选项卡数量实现思路及代码
- jQuery:简单6行代码实现tab效果
- 用Materail Design设计实现悬浮的Tablayout
- extjs 时间范围选择自动判断的实现代码
- extjs4:代码实现comboBox选中事件
- android SlidingTabLayout实现ViewPager页卡滑动效果
- 使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能
- 使用TabLayout和Viewpager实现选项卡切换
- 安卓 TabLayout+ViewPager实现滑动Tab效果
- Android 导航条效果实现(六) TabLayout+ViewPager+Fragment
- Extjs4.x Vtype扩展实现验证密码和确认密码相等