浏览 8436 次
|
锁定老帖子 主题：Ext 组件不显示解决方案
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-02-18
在做项目的时候，常常会发现组件显示不出来的情况，可以尝试如下几种方式：
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() 方法了。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-05-07
这种方式下 虽然第一次打开没问题。但是当tabpanel切换或者，关闭再次打开后就会不能显示。不知这个问题怎么解决
|
| 返回顶楼 | |
|
发表时间：2008-05-08
碰到一个不显示组件的问题，tabpanel如果只有一个tab时显示正常，但是如果打开2个以上tab，后面打开tab form里面的组件都不显示了，看来ext2 bug还不少。
|
| 返回顶楼 | |
|
发表时间：2008-05-09
id重复也会不显示组件
|
| 返回顶楼 | |
|
发表时间：2008-05-15
liminbai 写道 这种方式下 虽然第一次打开没问题。但是当tabpanel切换或者，关闭再次打开后就会不能显示。不知这个问题怎么解决
请问这个问题解决了么? 有没有什么方法解决多tabpanel切换显示问题啊?? |
| 返回顶楼 | |
|
发表时间：2008-05-30
jacky9692 写道 liminbai 写道 这种方式下 虽然第一次打开没问题。但是当tabpanel切换或者，关闭再次打开后就会不能显示。不知这个问题怎么解决
请问这个问题解决了么? 有没有什么方法解决多tabpanel切换显示问题啊?? 不知道你是什么情况下碰到的多个tabpanel切换显示问题，希望可以贴点代码出来，这样便于帮你查找原因。 我在项目中使用了5个tabpanel，每个tabpanel中还嵌套了grid，未见显示问题。不知你是否按照我上面写的第2点中的show方法？ |
| 返回顶楼 | |
|
发表时间：2008-05-31
vuens 写道 碰到一个不显示组件的问题，tabpanel如果只有一个tab时显示正常，但是如果打开2个以上tab，后面打开tab form里面的组件都不显示了，看来ext2 bug还不少。
呵呵!最近才算真的明白，其实很多自己认为的bug最终还是自己的代码的问题。所以，怀疑是ext问题还是不如找自己代码的问题。^_^ |
| 返回顶楼 | |
|
发表时间：2008-06-18
kayzhan 写道 vuens 写道 碰到一个不显示组件的问题，tabpanel如果只有一个tab时显示正常，但是如果打开2个以上tab，后面打开tab form里面的组件都不显示了，看来ext2 bug还不少。
呵呵!最近才算真的明白，其实很多自己认为的bug最终还是自己的代码的问题。所以，怀疑是ext问题还是不如找自己代码的问题。^_^ 仁兄你说这话的时候最好多做做动态的添加panel的例子,你就明白了,不要自己在那清高!ok? 有些问题你不多做根本不知道问题所在! |
| 返回顶楼 | |
|
发表时间：2008-09-18
不是bug
多研究下 可以解决的 |
| 返回顶楼 | |
|
发表时间：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就可以显示两列 |
| 返回顶楼 | |
