Extjs 3.3中切换tab时隐藏相应工具栏出现空白解决方案

时间：2026-06-16 07:02

在Extjs3 3中切换TabPanel时，若仅调用hide()隐藏工具栏会因高度未重置而留下空白。解决方法是先记录当前高度，然后强制设为0，显示时再恢复原高度。此方案能彻底消除空白。

今天遇到一个常见的小坑：切换 TabPanel 面板时想把对应的工具栏隐藏掉，结果一操作——直接给我留了个空白！先看这画面，熊板板的空白，简直不能忍。

不啰嗦，直接上解决方案。关键就两步：隐藏时不仅要调用 hide()，还得把高度强制设为 0；显示时再把高度恢复回去。下面这段代码实测可用：

复制代码代码如下:

//隐藏
Ext.getCmp('Tab2').tbar.hide();
Ext.getCmp('Tab2').tbar.dom.style.height = '0px';
//显示
Ext.getCmp('Tab2').tbar.show();
Ext.getCmp('Tab2').tbar.dom.style.height = '27px';//高度可以自己定义

搞定，so easy！看最终效果：

来源：https://www.jb51.net/article/35241.htm

extjs

上一篇ExtJS中Ext.Direct加载与提交错误排查方法 下一篇ExtJS 3.31 TreeGrid静态页面加载JSON数据实现

本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。

同类最新

继续查看同栏目最近更新的文章。

前端开发 · 2026-07-04

HTML双英雄图精准居中与并排对齐实战指南

本文详解如何使用CSS Flexbox将两个英雄图在页面中水平居中、等高对齐，并保持50px间距，解决justify-content align-items单独作用于子元素无效的问题。想让两个视觉冲击力十足的英雄图在首页并排居中，是提升首屏吸引力的经典设计。但很多开发者都踩过同一个坑：直接在 `

前端开发 · 2026-07-04

Flexbox实现div水平垂直居中的方法

使用 Flexbox 实现 div 的水平垂直居中，推荐在父容器上设置 display: flex，并配合 justify-content: center（控制主轴居中）与 align-items: center（控制交叉轴居中），同时确保父容器拥有明确高度，例如 min-height: 100vh

前端开发 · 2026-07-04

React循环中正确管理多个独立Modal实例的方法

在 React 开发中，我们常常会遇到这样的场景：需要在一个列表循环里渲染多个弹窗（Modal）。如果处理不当，点击任何一个按钮，都会导致所有的弹窗同时打开或关闭，这显然不是我们想要的效果。问题的根源在于状态管理：当多个 Modal 实例共享同一份控制其显示隐藏的状态时，它们的行为就被捆绑在了一起。