ext fieldset里边的控件 不显示 Who help me?
我在一个FormPanel里，加了3个选项卡，每个选项卡里有若干个fieldset来放控件。
但是，第一个选项卡里的，fieldset的控件，都能显示，而第2个和第3个选项卡里的fieldset里的控件，
不显示。
上图，看一下，
第一个选项卡：
你看，fieldset的控件可以显示吧。
在看第二个选项卡：
选项卡里没有控件吧。。
看第二个选项卡的代码：
你看'fieldset'是有控件的吧。。
可是，为什么，里边的控件显示不出来啊。
在网上搜了下，http://shenheng.blogbus.com/logs/12457290.html
说是，没有渲染，按照他的方式试了下，
还是不可以。。。
谁来帮帮我呀。。。
--------------2009-11-23日,因2楼朋友需要添加.(自己遇到问题的时候,有热心朋友帮助过,算是我的一点小回报,和付出吧.(*^__^*) 嘻嘻……)----------------------------------------
已解决.原因是,跟控件的渲染顺序有关.
-----------------------------
你这样click是在它的tab处理之前调用的，这个时候那个界面还没有生成，还没做渲染，正确的做法要在它用js生成了这个tab页面以后再调用。
所以你还是用listeners监听到整个tab页面完成后执行看看。
listeners:{
activate:function(tab){
handleIEhasLayout();
}
}
------------------提问者对于答案的评价：
这个东西太神奇了http://shenheng.blogbus.com/logs/12457290.html
像这里边说的。我结合你的，和这篇文章。真的很感谢你哟。。
--------------------------------------------------------------
网上的文章:
---doLayout--Ext的界面显示中的陷阱 - [IT笔记]
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://shenheng.blogbus.com/logs/12457290.html
在近日的Ex 2.0t研究中，遇到一个非常奇怪的问题，在一个TabPanel中动态增加一个FormPanel，这个FormPanel的items是FieldSet，FieldSet里再包含各种Field。我是通过TabPanel的add方法添加FormPanel的，然后再用setActiveTab方法将FormPanel显示出来，这时就出现一个很奇怪的问题：FormPanel里面的Field一个也看不到，能过调试的方式，看到各个Field的rendered属性都是false，也就是说这些Field一个都没有被进行渲染(rendering)方面的处理，追查了很久，没有找到问题的根源。后来，无意中发现，当改变窗口大小时，FormPanel里的Field就可以显示出来了，真是非常的神奇。
今晚，再将代码里的重要部分抽取出来，做了下面一个测试例子（代码在正文之后）。在这段代码里，我直接创建一个FormPanel，里面还是先一个FieldSet，在FieldSet里添加Field，接着再创建一个TabPanel，将刚才创建的FormPanel作为TabPanel的items，注意：在我的测试例子里，FormPanel是直接通过TabPanel的构造函数加入的，而不是能过TabPanel的add方法添加的，因此，我认为这是一种静态添加，而不是动态增加。当用IE打开这个测试例子，Form里面的元素没有显示出来，必须改变一下窗口大小，Form里面的元素才能正常显示。在Ext的论坛搜索了一下，也有人遇到类似的问题（详见http://75.126.167.146/forum/showthread.php?t=21356），回答者的解决方法是“If you dynamically add a panel to container you always need to call container.doLayout() afterwards”，就是说你动态增加一个panel到某个容器后，你需要调用容器doLayout方法进行重新布局，你只需要将测试例子最后的javascript语句“tp.doLayout();”的注释去掉，你就可以看到Form里的元素，而不需要改变窗口大小。论坛说使用这种机制的原因是“Adding a panel doesn't automatically call doLayout to allow you to add multiple panels without having the overhead of a relayout every time”，就是说避免当用户向同一容器不断添加panel里，容器不断地重新布局的情况（如果容器是自动重新布局的话，就是每添加一个panel，容器就要重新布局一次），这是出于性能的考虑，是可以理解的，但我的问题是：在我的测试例子里，我用的是TabPanel构造函数来设置items，而且这是在TabPanel的render调用之前，这样子应该算是静态添加panel，而不是动态添加，因此，Form里的元素应该是主动显示出来的，而不需要我去调用doLayout。Ext的API Document中，Ext.Container的文档里解释了doLayout方法：“Force this container's layout to be recalculated. A call to this function is required after adding a new component to an already rendered container. If you are not dynamically adding and removing components after render, this function will generally not need to be called”。按这个文档的说法，就是说只有添加控件到已经渲染过的容器，才需要调用doLayout。所以，我认为这是Ext 2.0的一个Bug，容器在render时，没有将容器里的所有控件都渲染，先提交到Ext官方再说，看看怎么解决这个问题。
测试例子代码，请放在ext的examples目录下执行，或者自行修改相差的.js和.css设置，关键在于最后的tp.doLayout()语句，使用或注释就会产生不同的效果：
---------------------------------------------------------------------------------------------因此最终原因:
doLayout();
--------------------------------------
2楼的朋友,因为问题已经好长时间了,具体我加的那句话,我也忘了..但是跟控件的渲染有关...doLayout();可以帮到你哦...(*^__^*) 嘻嘻……
但是，第一个选项卡里的，fieldset的控件，都能显示，而第2个和第3个选项卡里的fieldset里的控件，
不显示。
上图，看一下，
第一个选项卡：
你看，fieldset的控件可以显示吧。
在看第二个选项卡：
选项卡里没有控件吧。。
看第二个选项卡的代码：
{
title:'家庭成员资料',
layout:'form',
defaultType: 'textfield',
items: [
{
xtype:'fieldset',
title: '上年内家庭成员变动情况',
autoHeight: true,
defaultType: 'textfield',
items:[
{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
}
]
},{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
}]
}
你看'fieldset'是有控件的吧。。
可是，为什么，里边的控件显示不出来啊。
在网上搜了下，http://shenheng.blogbus.com/logs/12457290.html
说是，没有渲染，按照他的方式试了下，
还是不可以。。。
谁来帮帮我呀。。。
--------------2009-11-23日,因2楼朋友需要添加.(自己遇到问题的时候,有热心朋友帮助过,算是我的一点小回报,和付出吧.(*^__^*) 嘻嘻……)----------------------------------------
已解决.原因是,跟控件的渲染顺序有关.
-----------------------------
你这样click是在它的tab处理之前调用的，这个时候那个界面还没有生成，还没做渲染，正确的做法要在它用js生成了这个tab页面以后再调用。
所以你还是用listeners监听到整个tab页面完成后执行看看。
listeners:{
activate:function(tab){
handleIEhasLayout();
}
}
------------------提问者对于答案的评价：
这个东西太神奇了http://shenheng.blogbus.com/logs/12457290.html
像这里边说的。我结合你的，和这篇文章。真的很感谢你哟。。
--------------------------------------------------------------
网上的文章:
---doLayout--Ext的界面显示中的陷阱 - [IT笔记]
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://shenheng.blogbus.com/logs/12457290.html
在近日的Ex 2.0t研究中，遇到一个非常奇怪的问题，在一个TabPanel中动态增加一个FormPanel，这个FormPanel的items是FieldSet，FieldSet里再包含各种Field。我是通过TabPanel的add方法添加FormPanel的，然后再用setActiveTab方法将FormPanel显示出来，这时就出现一个很奇怪的问题：FormPanel里面的Field一个也看不到，能过调试的方式，看到各个Field的rendered属性都是false，也就是说这些Field一个都没有被进行渲染(rendering)方面的处理，追查了很久，没有找到问题的根源。后来，无意中发现，当改变窗口大小时，FormPanel里的Field就可以显示出来了，真是非常的神奇。
今晚，再将代码里的重要部分抽取出来，做了下面一个测试例子（代码在正文之后）。在这段代码里，我直接创建一个FormPanel，里面还是先一个FieldSet，在FieldSet里添加Field，接着再创建一个TabPanel，将刚才创建的FormPanel作为TabPanel的items，注意：在我的测试例子里，FormPanel是直接通过TabPanel的构造函数加入的，而不是能过TabPanel的add方法添加的，因此，我认为这是一种静态添加，而不是动态增加。当用IE打开这个测试例子，Form里面的元素没有显示出来，必须改变一下窗口大小，Form里面的元素才能正常显示。在Ext的论坛搜索了一下，也有人遇到类似的问题（详见http://75.126.167.146/forum/showthread.php?t=21356），回答者的解决方法是“If you dynamically add a panel to container you always need to call container.doLayout() afterwards”，就是说你动态增加一个panel到某个容器后，你需要调用容器doLayout方法进行重新布局，你只需要将测试例子最后的javascript语句“tp.doLayout();”的注释去掉，你就可以看到Form里的元素，而不需要改变窗口大小。论坛说使用这种机制的原因是“Adding a panel doesn't automatically call doLayout to allow you to add multiple panels without having the overhead of a relayout every time”，就是说避免当用户向同一容器不断添加panel里，容器不断地重新布局的情况（如果容器是自动重新布局的话，就是每添加一个panel，容器就要重新布局一次），这是出于性能的考虑，是可以理解的，但我的问题是：在我的测试例子里，我用的是TabPanel构造函数来设置items，而且这是在TabPanel的render调用之前，这样子应该算是静态添加panel，而不是动态添加，因此，Form里的元素应该是主动显示出来的，而不需要我去调用doLayout。Ext的API Document中，Ext.Container的文档里解释了doLayout方法：“Force this container's layout to be recalculated. A call to this function is required after adding a new component to an already rendered container. If you are not dynamically adding and removing components after render, this function will generally not need to be called”。按这个文档的说法，就是说只有添加控件到已经渲染过的容器，才需要调用doLayout。所以，我认为这是Ext 2.0的一个Bug，容器在render时，没有将容器里的所有控件都渲染，先提交到Ext官方再说，看看怎么解决这个问题。
测试例子代码，请放在ext的examples目录下执行，或者自行修改相差的.js和.css设置，关键在于最后的tp.doLayout()语句，使用或注释就会产生不同的效果：
<html>
<head>
<title>My Case</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"></link>
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
</head>
<body>
<div id="tab">
</div>
</div>
</body>
</html>
<script language="javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var fs = new Ext.FormPanel({
frame: true,
title:'XML Form',
labelAlign: 'right',
labelWidth: 85,
width:340,
waitMsgTarget: true,
items: [
new Ext.form.FieldSet({
title: 'Contact Information',
autoHeight: true,
defaultType: 'textfield',
items: [{
fieldLabel: 'Field1',
name: 'Field1',
width:190
}]
})
]
});
var tp = new Ext.TabPanel({
activeTab:0,
items: [fs]
});
tp.render('tab');
//注释下一行或取消下一行的注释将有不同的效果
//tp.doLayout();
});
</script>
---------------------------------------------------------------------------------------------因此最终原因:
doLayout();
--------------------------------------
2楼的朋友,因为问题已经好长时间了,具体我加的那句话,我也忘了..但是跟控件的渲染有关...doLayout();可以帮到你哦...(*^__^*) 嘻嘻……