tabpanel是extjs中一种比较常用的布局容器控件,也比较简单。

  1. ///1:相关的插件,
  2. var tabScrollerMenu = Ext.create("Ext.ux.TabScrollerMenu", {
  3. maxText: 15,
  4. pageSize: 100
  5. });
  6. var tabReorderer = Ext.create('Ext.ux.TabReorderer');
  7. var tabClosePlugin = Ext.create('Ext.ux.TabCloseMenu', {
  8. closeTabText: '关闭',
  9. closeOthersTabsText: '关闭其他页签',
  10. closeAllTabsText: '关闭所有页签'
  11. });
  12.  
  13. ///2:创建页签容器,内容容器,放置各种控件或者是html
  14. zhuUx.tabs = Ext.widget('tabpanel', {
  15. activeTab: 0,
  16. floating: false,
  17. plugins: [tabScrollerMenu, tabClosePlugin, tabReorderer],
  18. region: 'center',
  19. collapseMode: "undefined",
  20. listeners: {
  21. tabchange: {
  22. scope: zhuUx,
  23. fn: zhuUx.mainTabChanged
  24. }
  25. },
  26. defaults: {
  27. bodyPadding: 1
  28. },
  29. items: []
  30. });
  31.  
  32. /// 3:动态加入页签,避免重复加入页签,
  33. /// 解决办法是给每个页签加上唯一标记属性,
  34. /// 判断一下唯一标识是否存在,存在则不添加了
  35. var currentTabsCount = zhuUx.tabs.items.length;
  36. for (i = 0; i < currentTabsCount; i++) {
  37. if (zhuUx.tabs.items.getAt(i).businessObjectId == businessObjectId) {
  38. zhuUx.tabs.setActiveTab(i);
  39. return;
  40. }
  41. }
  42. var dataManagerPanel = Ext.create(zhuUx.itemEditor, {
  43. businessObjectId: businessObjectId,
  44. closable: true,
  45. title: "test"
  46. });
  47. zhuUx.tabs.add(dataManagerPanel).show();
  48.  
  49. ///4:对页签进行隐藏,显示,移除,删除,激活等操作
  50. zhuUx.tabs.getTabBar().items.getAt(i).show();
  51. zhuUx.tabs.getTabBar().items.getAt(i).hide();
  52. zhuUx.tabs.remove()
  53.  
  54. ///6:隐藏页签表头
  55. zhuUx.tabs.getTabBar().hide();
  56.  
  57. ///5:页签切换事件
  58. mainTabChanged: function (tabPanel, newCard, oldCard, eOpts) {
  59. var zhuUx = this;
  60. if (newCard != zhuUx.luxianTab) {
  61. /// 判断数据,是否需要刷新
  62. try {
  63.  
  64. } catch (e) {
  65.  
  66. }
  67. }
  68. newCard.updateLayout();
  69. },
  70.  
  71. ///6:常见页签的属性与方法

      closable ///是否可关闭
      iconCls ///图标样式
      iconAlign ///图标对齐方式
      disabled ///是否禁用

  1.  

  

tabpanel如何隐藏页签表头以及基本用法总结的更多相关文章

  1. xshell显示隐藏窗口页签

    有时候不知道操作说了什么红框中的页签会消失,可以ctrl+shift+t 控制显示隐藏

  2. WPF如何实现一个漂亮的页签导航UI

    最近看到一个比较漂亮的UI主界面,该UI是用左边的页签进行导航,比较有特色,就想着尝试用WPF来实现一下.经过一番尝试,基本上将UI设计图的效果用WPF程序进行了实现.下面介绍一下主要的思路: 1 U ...

  3. android124 zhihuibeijing 新闻中心-新闻 -北京页签 下拉刷新

    缓存工具类:以url为key,json数据为value, package com.itheima.zhbj52.utils; import com.itheima.zhbj52.global.Glob ...

  4. android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现

    ## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewP ...

  5. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  6. [转] JQuery UI Tabs 动态添加页签,并跳转到新页签

    [From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...

  7. 1、CRM2011编程实战——清空指定页签以下的全部选项,并对页签以下的指定控件进行操作

    需求:当页面载入时,"呼叫编号"保持不变,"任务号"自己主动更新."接报时间"和"发生日期"自己主动设置为当天日期和时间 ...

  8. Android实现图片滚动控件,含页签功能,让你的应用像淘宝一样炫起来

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...

  9. 实现Vue的多页签组件

    在之前的博客中  关于vue的多页面标签功能,对于嵌套router-view缓存的最终无奈解决方法  有写过vue的多页签功能的解决方案 可以看到我当时那个多页签的组件还是比较简单 的,只有打开跟关闭 ...

随机推荐

  1. I.MX 6UL与6ULL应用领域区别

  2. Dubbo和Spring Cloud

    1.Dubbo和Spring Cloud区别 1).通信方式不同 Dubbo使用RPC通信,Spring Cloud使用Http RestFul方式 2) 组成部分不同 组件 Dubbo Spring ...

  3. Python学习基本小练习

    对于python的10个小练习做下笔记 1.使用while循环输入1 2 3 4 5 6 8 9 10...自己写的代码如下: num1 = 0 while num1 < 10: num1 = ...

  4. python基础知识17---装饰器2

    函数式编程复习: def map_test(func,array): array_new=[] for i in array: array_new.append(func(i)) return arr ...

  5. kafka reset offset 手工重置offset

    1.场景 a)有时消费端逻辑修改,需要重复消费数据,需要将offset设置到指定位置. 2.实现 kafka版本:0.11.* KIP-122: Add Reset Consumer Group Of ...

  6. Azkaban实战,Command类型单一job示例,任务中执行外部shell脚本,Command类型多job工作flow,HDFS操作任务,MapReduce任务,HIVE任务

    本文转载自:https://blog.csdn.net/tototuzuoquan/article/details/73251616 1.Azkaban实战 Azkaba内置的任务类型支持comman ...

  7. [UE4]镜像

    一.这是一个右手模型,通过镜像可以得到一个左右模型. 二.通过上图分析,镜面是X轴和Z轴形成的一个面,Y轴与XZ面垂直,因此就是镜像Y轴,将模型的Transform.Scale.Y设置为-1,即可得到 ...

  8. Highcharts绘制曲线图小结

    Higcharts绘制曲线图很好用! 虽然说Highcharts官网有API 刚接触这个领域,学有心得,理解不到位之处希望大家多多指教! 项目绘制的曲线是:平均水位随时间的变化而改变的水情走势图. 主 ...

  9. List集合去重

    本篇包含了两种去重,一种是List集合去重,一种是两个List集合去重合并 List集合去重,一般是两种方式,一种是遍历list集合判断后赋给另一个list集合,一种是用赋给set集合再返回给list ...

  10. python(list、字典、元组、字符串方法、文件读写)草稿

    1.list 定义list a = [] 添加元素 a.append('xx')   #在list末尾添加 a.insert(0,'abc')   #在指定某位置添加元素.指定的下标不存在就在末尾添加 ...