Ext 组件不显示解决方案

在做项目的时候，常常会发现组件显示不出来的情况，可以尝试如下几种方式：
1.检查Height
通常情况下，看不到组件显示或者只看到一小条，第一个需要做的就是先将这个组件的height属性显式的设置出来，通常情况下就会显示。

2.tabpanel的情况
如果你的空间是放在TabPanel当中，那么需要注意的是将内嵌的组件直接写在items中，例如：

   new Ext.TabPanel({
        activeTab: 0,
        autoHeight: true,
        plain: true,
        tabPosition: 'top',
        border: true,
        defaults: {
            autoScroll: true
        },
        items: [zzPanel, hzPanel]
    });

不可以多此一举的写成：

new Ext.TabPanel({
        activeTab: 0,
        width: 600,
        height: 550,
        plain: true,
        tabPosition: 'top',
        border: false,
        defaults: {
            autoScroll: true
        },
        items: [{
            title: ResourceHelper.i18n.zz,
            items: [zzgrid],
            listeners: {
                activate: changeHandle
            }
        }, {
            id: 'hztab',
            title: ResourceHelper.i18n.hz,
            items: [hzgrid],
            listeners: {
                activate: changeHandle
            }
        }]
    });

 

这样写会出现只有activeTab所对应的tab中的grid有显示，其他tab中的grid均无法显示。（我在调试这个bug的时候，是在一次偶然的机会中，修改的activeTab的值才发现的这个bug）。

这种情况下，使用show()来显示tab中的grid。

 

3.panel中嵌套grid，而这个panel有嵌套在TabPanel中。

这个情况下，不仅仅需要注意第二点中的一些注意事项，还要注意的是，在这种情况下，仅仅采用show()是无法显示所有控件的。因为仅仅使用show()仅仅可以将TabPanle中的直接控件即panel显示出来，而无法将嵌套在panel中的grid也显示出来。

这个时候，就需要在调用一下panel的doLayout() 方法了。