`

Ext 组件不显示解决方案

EXTHTML 
阅读更多

在做项目的时候，常常会发现组件显示不出来的情况，可以尝试如下几种方式：
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() 方法了。

分享到：
| PYJED圈子终于批下来了
评论
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切换或者，关闭再次打开后就会不能显示。不知这个问题怎么解决
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext江湖(完整+书签).part1

    对于Ext的使用者来说，本书针对实战中面临的种种问题，给出了详尽的解决方案和思路；对于想研究源码的读者来说，本书绝对是难得的良师益友。 全书思路清晰、内容一气呵成，适合Ext用户参考学习，还适合其他JS框架的...

    Extensible:Ext JS的酷组件

    关于可扩展实际上包含许多不同的组件，但是当前的主要产品是Calendar Pro，这是一种以（旧的）Google日历为风格的嵌入式日历解决方案。 它支持多种视图，拖放编辑，日历颜色编码，可本地化，并且易于扩展。扩展版本...

    .net EXT学习资料与源码

    作为领域驱动设计的先驱Eric Evans，对业务逻辑层作了更细致地划分，细分为应用层与领域层，通过分层进一步将领域逻辑与领域逻辑的解决方案分离。 　业务逻辑层在体系架构中的位置很关键，它处于数据访问层与表示层...

    Efs(Ext上二次开发,标签形式使用Ext) API文档

    2、完善的组件开发包：为企业组件开发人员提供的一套完整、稳定、高效的B/S结构设计业务逻辑层解决方案。 a)完善的基础类库的封装，极大提高企业的项目业务逻辑层组件开发效率，最大限度让业务接口组件简洁、高效...

    Ext江湖(完整+书签).part2

    对于Ext的使用者来说，本书针对实战中面临的种种问题，给出了详尽的解决方案和思路；对于想研究源码的读者来说，本书绝对是难得的良师益友。 全书思路清晰、内容一气呵成，适合Ext用户参考学习，还适合其他JS框架的...

    安装IIS时，添加删除组件中没有IIS的解决办法

    的错误，通过百度、Google后都没发现解决方案，后经过研究得到如下解决方案，分享给大家希望对大家有所帮助： xp升级到xp3版本后 在目录C:\WINDOWS\ServicePackFiles\i386中有fxsocm.inf文件 将其拷贝到C:\WINDOWS\...

    ExtAspNet_v2.3.2_dll

    -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件，此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel（不管你是Accordion...

    Efs(Ext上二次开发,标签形式使用Ext) Demo官方项目实例

    2、完善的组件开发包：为企业组件开发人员提供的一套完整、稳定、高效的B/S结构设计业务逻辑层解决方案。 a)完善的基础类库的封装，极大提高企业的项目业务逻辑层组件开发效率，最大限度让业务接口组件简洁、高效...

    龙门物流管理系统(Ext+SSH)130221.rar

    "龙门物流管理系统(Ext+SSH)130221.rar" 是一个为计算机专业人员设计的JSP源码资料包，它集成了Ext技术和SSH框架，以实现一个全面、高效和用户友好的物流管理解决方案。这个系统是为了满足现代物流公司日益复杂的...

    efs ext java 源代码

    EfsFrame框架是一套基础的企业级开发解决方案，整个框架体系中包含了Web表现层开发包，组件开发包，基础数据库设计一整套完整的基于B/S架构应用程序设计开发的完整方案。 a) 完整的事务、事件管理、用户、单位、角色...

    图书管理系统(struts+hibernate+spring+ext).rar

    图书管理系统是一个基于Struts+Hibernate+Spring+Ext的计算机专业JSP源码资料包，它为开发者提供了一套完整的图书管理解决方案。这个系统采用了经典的MVC架构，将业务逻辑、数据访问和界面展示分离，使得代码结构...

    图书管理系统(struts+hibernate+spring+ext)130221.rar

    整个系统实现了包括图书信息的增删改查、用户管理、借阅与归还等核心功能，是一个适合图书馆或学校进行图书管理的软件解决方案。该资料包不仅适合计算机专业的学生作为学习和实践的项目，也可供软件开发者参考和借鉴...

    微信小程序textarea层级过高的解决方法

    二、使用场景及解决方案 1、弹窗显示 2、底部fixed定位的按钮，页面滚动时，例如添加购物车，显示价格 针对以上两种业务场景解决方式不同 针对场景1弹窗显示的处理方式 在显示弹窗时通过if或者绑定class属性

    layer jQuery弹出层插件写的图片查看器（相册层），兼容主流浏览器

    layer是一款近年来备受青睐的web弹层组件，它具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

    “无法加载安装程序库iis.dll"的解决方案

    点击添加/删除windows组件时，报错：无法加载安装程序库iis.dll,或是找不到函数OcEntry。请与您的系统管理员联系。特定错误码是Ox7e。 点击确定之后就出现：无法初始化程序。 原因及解决方法： C:\Windows\System...

    【JavaScript源代码】EXTJS7实现点击拖拉选择文本.docx

    　本文实例为大家分享了EXTJS7实现点击拖拉选择文本的具体代码，供大家参考，具体内容如下　默认情况下，用户无法通过点击拖拉选择界面上的文本　解决方案　Ext.Component组件可以使用userSelectable配置项，设置为...

    微信小程序 textarea 层级过高问题简单解决方案

    这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 建立一个新的textarea 组件代替原生textarea ,...

    ext4教程,里面包含的是中文教程，目前没有全部的教程

    对于广大的Web程序员，《ExtJS Web应用程序开发指南(第2版)》能帮你找到经典应用的解决方案。对RIA Web应用开发的爱好者，《ExtJS Web应用程序开发指南(第2版)》可以帮你找到进步的阶梯。《ExtJS Web应用程序开发...

    EfsFrame(java开发框架) v2.2 源代码.rar

    EfsFrame是一套整体的企业级php开发框架解决方案，整个框架体系中包含了Web表现层开发包，组件开发包，基础数据库设计一整套完整的基于B/S架构应用程序设计开发的完整解决方案。Efs框架从研发到时间，历时近10年，...

    EfsFrame(net开发框架) v2.2 源代码.rar

    EfsFrame是一套整体的企业级php开发框架解决方案，整个框架体系中包含了Web表现层开发包，组件开发包，基础数据库设计一整套完整的基于B/S架构应用程序设计开发的完整解决方案。Efs框架从研发到时间，历时近10年，...

Magicbox
Global site tag (gtag.js) - Google Analytics