ExtJS扩展 垂直tabLayout实现代码

但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)

相关推荐

  • Android使用Fragment打造万能页面切换框架

    Android使用Fragment打造万能页面切换框架

    首先我们来回忆一下传统用Activity进行的页面切换,activity之间切换,首先需要新建intent对象,给该对象设置一些必须的参数,然后调用startActivity方法进行页面跳转.如果需要activity返回结果,则调用startActivityForResult方法,在onActivityResult方法中获得返回结果.此外,每一个要展示的activity需要在AndroidManifest.xml文件中注册.而且,如果在某些特定的情况下(比如65536方法数爆炸)要动态加载dex

  • Android TabLayout(选项卡布局)简单用法实例分析

    Android TabLayout(选项卡布局)简单用法实例分析

    本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到很漂亮的效果.但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个

  • Android编程之页面切换测试实例

    Android编程之页面切换测试实例

    本文实例讲述了Android编程之页面切换测试.分享给大家供大家参考.具体分析如下: 一.软件平台: win7 + eclipse + sdk 二.设计思路: 两个页面:mian和ok,每个页面上有一个按键,点击则可以互相切换 三.源代码: main.xml源代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andr

  • Android 中TabLayout自定义选择背景滑块的实例代码

    Android 中TabLayout自定义选择背景滑块的实例代码

    TabLayout是Android 的Material Design包中的一个控件,可以和V4包中的ViewPager搭配产生一个联动的效果.这里我自定义了一个滑块能够跟随TabLayout进行滑动选择的SliderLayout.效果见下图(白色方框): 下面是SliderLayout的源码: import android.content.Context; import android.content.res.TypedArray; import android.graphics.drawabl

  • AndroidUI组件SlidingTabLayout实现ViewPager页滑动效果

    AndroidUI组件SlidingTabLayout实现ViewPager页滑动效果

    使用SlidingTabLayout需要准备2个类,分别是 SlidingTabLayout,与SlidingTabStrip,,放进项目中时只用修改下包名即可. 效果制作的不是很好. 这篇文章,也是在网上搜了很多资源参考,对 SlidingTabLayout.java和SlidingTabStrip.java进行了修改.大家可以更改他的格式字体大小.选中状态,分割线调整等等.先上传这两个文件,改动支出都做了注释. SlidingTabLayout.java /* * Copyright (C)

  • Android中TabLayout结合ViewPager实现页面切换

    Android中TabLayout结合ViewPager实现页面切换

    一.实现思路 1.在build.gradle中添加依赖,例如: compile 'com.android.support:support-v4:23.4.0' compile 'com.android.support:design:23.4.0' 也可以将support-v4替换为appcompat-v7,例如: compile 'com.android.support:appcompat-v7:23.4.0' 因为appcompat-v7是依赖于support-v4的. 更多说明可参考官方文档

  • Android中TabLayout结合ViewPager实现页面切换效果

    Android中TabLayout结合ViewPager实现页面切换效果

    先看看效果,如图: 1.因为TabLayout是Android Design Support Library官方库的一个控件,所以使用TabLayout时候需要先添加对该库的依赖 compile 'com.android.support:design:22.2.0' 2.下面是TabLayout和ViewPager配合使用的布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns

  • Android中使用TabHost 与 Fragment 制作页面切换效果

    三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义页面切换的效果:切换页面时,当前页面滑出,目标页面滑入.这是2个不同的动画设定动画时要区分对待 import android.content.Context; import android.util.AttributeSet; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import

  • Android TabLayout实现京东详情效果

    Android TabLayout实现京东详情效果

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2. 这两天需要做一个仿京东详情的页面,上面的Tab切换,以前都是自己写Viewpager+fragment

  • android TabLayout使用方法详解

    android TabLayout使用方法详解

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2. 这两天需要做一个仿京东详情的页面,上面的Tab切换,以前都是自己写Viewpager+fragment

随机推荐