ext fieldset里边的控件不显示 Who help me?

catlovefox

浏览: 26128 次
性别:
来自: 济南

最近访客更多访客>>

402230366

h1991_huang

jiage17

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT IE JavaScript CSS PHP

我在一个FormPanel里，加了3个选项卡，每个选项卡里有若干个fieldset来放控件。
但是，第一个选项卡里的，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();可以帮到你哦...(*^__^*) 嘻嘻……