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() 方法了。

评论

9 楼 tiesheng 2008-11-11  

shjy.nicholas 写道

jacky9692 写道

liminbai 写道

这种方式下   虽然第一次打开没问题。但是当tabpanel切换或者，关闭再次打开后就会不能显示。不知这个问题怎么解决

请问这个问题解决了么?
有没有什么方法解决多tabpanel切换显示问题啊??

不知道你是什么情况下碰到的多个tabpanel切换显示问题，希望可以贴点代码出来，这样便于帮你查找原因。
我在项目中使用了5个tabpanel，每个tabpanel中还嵌套了grid，未见显示问题。不知你是否按照我上面写的第2点中的show方法？

我也碰到多tab显示问题。我只是写了简单的demo。代码如下：

页面中：
<div id="tabs" style="algin:center;height:420px;width:100%">
   <div id="tab1" style="algin:center;height:420px;width:100%"/>
   <div id="tab2" style="algin:center;height:420px;width:100%"/>
</div>

Ext.onReady(function()
{  
        var  tabDiv = Ext.get("tab4");
        var  tabPanel = new Ext.TabPanel({
        renderTo:'tabs',
        height:tabDiv.getComputedHeight()+70,
width:tabDiv.getComputedWidth(),
deferredRender:false,
        activeTab:0,
        plain:false,
    frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'tab1',title: '日预警信息明细'},
      {contentEl:'tab2',title: '月预警信息明细'},
      {contentEl:'tab3',title: '季预警信息明细'},
      {contentEl:'tab4',title: '定量指标预警信息明细'},
            {contentEl:'tab5',title: '定性指标预警信息明细'}
        ]
    });
   
   
    form1 = new Ext.FormPanel({
        labelWidth: 250,
        frame:true,
        labelAlign: 'right',
        title: '日预警信息',
        bodyStyle:'padding:5px 5px 0',
        //defaultType: 'textfield',
        items: [{
                                     layout:'column',
                                     layoutOnTabChange :true,
                                     items:[{
                                          columnWidth:.45,
                                          layout: 'form',
                                          items: [{
                                               xtype:'textfield',
                                               fieldLabel: '客户名称',
                                               name: 'custName1',
                                               width:200,
                                               maxLength:32,
                       allowBlank:false,
                       regex:/^[\s|　]*([^\s　]+[\s|]*)+[\s|]*$/,
                       regexText:'客户名称不能为空!',
                       blankText :'请输入客户名称'
                                      }, {
                                              xtype:'textfield',
                                              fieldLabel: '所属机构',
                      name: 'textfield1',
                      allowBlank:false,
                      value: '北京分行',
                      maxLength:20,                
                      blankText :'所属机构',
                      width:200
                                     }]
                                     },{
                                        columnWidth:.45,
                                        layout: 'form',
                                        items: [{
                                              xtype:'textfield',
                                              fieldLabel: '处理状态',
                      name: 'textfield2',
                      allowBlank:false,
                      value: '未查看',
                      maxLength:20,                
                      blankText :'处理状态',
                      width:200
                                  },{
                                             xtype:'textfield',
                                             fieldLabel: '一日前结算账户贷方发生额',
                     name: 'textfield2',
                     allowBlank:false,
                     value:1000000,
                     maxLength:20,                
                     blankText :'一日前结算账户贷方发生额',
                     width:200
                                }]
                        }]
                  }],
                           buttons: [
        {
            text: '查看预警通知书',
            handler : function()
            {
            location.href='小企业预警通知书(客户经理).html';
            }
         },{
            text: '填写核查报告',
            handler : function()
            {
            location.href='小企业预警核查报告(客户经理).html';
            }
        }]
    });
    form1.render("tab1");
   
   
   
   form2 = new Ext.FormPanel({
        labelWidth: 250,
        frame:true,
        labelAlign: 'right',
        title: '月预警信息',
        bodyStyle:'padding:5px 5px 0',
        layoutOnTabChange :true,
        //defaultType: 'textfield',
        items: [{
                                     layout:'column',
                                     layoutOnTabChange :true,
                                     items:[{
                                          columnWidth:.45,
                                          layout: 'form',
                                          items: [{
                                               xtype:'textfield',
                                               fieldLabel: '客户名称',
                                               name: 'custName1',
                                               width:200,
                                               maxLength:32,
                       allowBlank:false,
                       regex:/^[\s|　]*([^\s　]+[\s|]*)+[\s|]*$/,
                       regexText:'客户名称不能为空!',
                       blankText :'请输入客户名称'
                                      }, {
                                              xtype:'textfield',
                                              fieldLabel: '所属机构',
                      name: 'textfield1',
                      allowBlank:false,
                      value: '北京分行',
                      maxLength:20,                
                      blankText :'所属机构',
                      width:200
                                     }]
                                     },{
                                        columnWidth:.45,
                                        layout: 'form',
                                        items: [{
                                              xtype:'textfield',
                                              fieldLabel: '处理状态',
                      name: 'textfield2',
                      allowBlank:false,
                      value: '未查看',
                      maxLength:20,                
                      blankText :'处理状态',
                      width:200
                                  },{
                                             xtype:'textfield',
                                             fieldLabel: '一日前结算账户贷方发生额',
                     name: 'textfield2',
                     allowBlank:false,
                     value:1000000,
                     maxLength:20,                
                     blankText :'一日前结算账户贷方发生额',
                     width:200
                                }]
                        }]
                  }],
buttons: [
     {
            text: '查看预警通知书',
            handler : function()
            {
            location.href='小企业预警通知书(客户经理).html';
            }
        },{
            text: '填写核查报告',
            handler : function()
            {
            location.href='小企业预警核查报告(客户经理).html';
            }
        }]
    });
    form2.render("tab2");
   })  
</script>


第一个tab显示分列是完全没有问题，第二个的代码同第一个完全一致，可是确不行。
如果把tab1删除掉tab2就可以显示两列

8 楼 jacky9692 2008-09-18  

不是bug
多研究下
可以解决的

7 楼 fengzhiliuxing 2008-06-18  

kayzhan 写道

vuens 写道

碰到一个不显示组件的问题，tabpanel如果只有一个tab时显示正常，但是如果打开2个以上tab，后面打开tab form里面的组件都不显示了，看来ext2 bug还不少。

呵呵!最近才算真的明白，其实很多自己认为的bug最终还是自己的代码的问题。所以，怀疑是ext问题还是不如找自己代码的问题。^_^

仁兄你说这话的时候最好多做做动态的添加panel的例子,你就明白了,不要自己在那清高!ok? 有些问题你不多做根本不知道问题所在!

6 楼 kayzhan 2008-05-31  

vuens 写道

碰到一个不显示组件的问题，tabpanel如果只有一个tab时显示正常，但是如果打开2个以上tab，后面打开tab form里面的组件都不显示了，看来ext2 bug还不少。

呵呵!最近才算真的明白，其实很多自己认为的bug最终还是自己的代码的问题。所以，怀疑是ext问题还是不如找自己代码的问题。^_^

5 楼 shjy.nicholas 2008-05-30  

jacky9692 写道

liminbai 写道

这种方式下   虽然第一次打开没问题。但是当tabpanel切换或者，关闭再次打开后就会不能显示。不知这个问题怎么解决

请问这个问题解决了么?
有没有什么方法解决多tabpanel切换显示问题啊??

不知道你是什么情况下碰到的多个tabpanel切换显示问题，希望可以贴点代码出来，这样便于帮你查找原因。
我在项目中使用了5个tabpanel，每个tabpanel中还嵌套了grid，未见显示问题。不知你是否按照我上面写的第2点中的show方法？

4 楼 jacky9692 2008-05-15  

liminbai 写道

这种方式下   虽然第一次打开没问题。但是当tabpanel切换或者，关闭再次打开后就会不能显示。不知这个问题怎么解决

请问这个问题解决了么?
有没有什么方法解决多tabpanel切换显示问题啊??

3 楼 teachman 2008-05-09  

id重复也会不显示组件

2 楼 vuens 2008-05-08  

碰到一个不显示组件的问题，tabpanel如果只有一个tab时显示正常，但是如果打开2个以上tab，后面打开tab form里面的组件都不显示了，看来ext2 bug还不少。

1 楼 liminbai 2008-05-07  

这种方式下   虽然第一次打开没问题。但是当tabpanel切换或者，关闭再次打开后就会不能显示。不知这个问题怎么解决