ExtJs 4.X 连续打开Tab页 只渲染激活页的解决办法

先跟大家说下场景：整个Web前端都是采用了Ext的tabpanel去加载页面，为了避免Ext的重复加载导致前端太重，所以没有用Iframe。前期一直没有发现一个问题，前俩天想看看页面加载和渲染速度，于是乎狂点菜单加载不同的Tab页，最终问题出现了：只渲染了激活的界面。

于是乎，各种百度啊Google啊，搜到一堆乱七八糟的狗扯，CoderMan真心不知道这些人是怎么解决的，说什么在页面render前后用标识去判别是否渲染完毕，如果渲染完毕那么方可以渲染下一个Tab页。可能是笔者比较笨，按照这种方法完全没有用。

最后果断全英文搜索，老外还是给力，搞半天也就一个配置项的问题，我们来看下啊配置项：

1	hideMode : String

2

3	一个字符串，它指定了这个组件的封装DOM元素会被隐藏. 值可以是:

4

5	'display' : 使用 display: none 样式组件将被隐藏.

6	'visibility' : 使用 visibility: hidden 样式组件将被隐藏.

7	'offsets' : 组件定位在文档的可见区域之外将被隐藏. 当一个隐藏的组件必须保持可测量的这是有用的. 使用 display 将导致一个 组件不可测.

看完这个配置，我们可以分析下，打开一个新的Tab页以后，其它未激活的Tab页都是display状态，就算为渲染完也只会隐藏，不会继续渲染。所以当我们把hidemode改成offsets的时候，一切问题都解决了，对可见区域隐藏，渲染会继续执行。所以那种快速连续打开tab页出现前面页面白屏的问题迎刃而解。

解决方案也就是TabPanel加如下一项：

1	hideMode:"offsets"

小结：ExtJs的功能十分丰富和强大，很多东西都要我们自己去实验，笔者在使用的过程中也发现了一些Bug。多写多看多用，ExtJs的基本功能掌握起来难度不大。

注：文章由CoderMan原创，转载请说明出处：CoderMan官方主页