ExtJs学习系列之 FormPanel 布局：Ext中FormPanel面板的嵌套及控件属性赋值

代码如下：

Ext.onReady(function() {
		var form1=new Ext.form.FormPanel({
			//title:"表单初始化-用户手册",
			id:"form1",
			width:300,
			autoHeight:true,
			frame:true,
			//renderTo:"a",
			labelWidth:65,
			labelAlign:"right",
			defaultType:"textfield",
			bodyStyle: 'padding:2px 0 0 0;' ,    //上－右－下－左
			items:[{
				name:"userName",
				fieldLabel:"用户名",
				width:200
			},{
				name:"password",
				fieldLabel:"密码",
				inputType:"password",
				width:200
			}]		
		});

		var form2=new Ext.form.FormPanel({
			//title:"表单初始化-用户手册",
			width:300,
			collapsible: true ,  //可收缩
			autoHeight:true,
			frame:true,
			//renderTo:"a2",
			labelWidth:65,
			labelAlign:"right",
			defaultType:"textfield",
			bodyStyle: 'padding:2px 0 0 0;' ,    //上－右－下－左
			items:[{
				name:"userName2",
				fieldLabel:"用户名2",
				width:200
			},{
				name:"password2",
				fieldLabel:"密码2",
				inputType:"password",
				width:200
			}]
		
		});

		var form3=new Ext.form.FormPanel({
			//title:"表单初始化-用户手册",
			width:300,
			autoHeight:true,
			//frame:true,
			//renderTo:"b",
			labelWidth:65,
			labelAlign:"right",
			defaultType:"textfield",  
			items:[form1,form2]
			/*buttons:[{
				text:"提交"
			},{
				text:"本地读取",
				handler:function(){
					var json={
						userName:"小明",
						password:"admin",
						userName2:"小明2",
						password2:"admin2"
					};
					form3.getForm().setValues(json);
				}
			}]
		*/
		});
	
		//确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合    
		function  onOK() {    
			 var  strMsg;    
			strMsg =  '姓名：'  + fp.getComponent( 'i_username' ).getValue() +  '，性别：' ;    
			 if  (fp.getComponent( 'male' ).checked) strMsg +=  '男' ;    
			 if  (fp.getComponent( 'female' ).checked) strMsg +=  '女' ;    
			strMsg +=  '，年龄：'  + fp.getComponent( 'i_age' ).getValue();    
			strMsg +=  '，住址：'  + fp.getComponent( 'i_address' ).getValue();    
			//alert(strMsg);    
			Ext.Msg.alert('title',strMsg);
		}   

		//创建主窗口    
		var w=new  Ext.Window({    
			title: 'Ext中FormPanel面板的嵌套及控件属性赋值' ,    
			width:400,    
			buttonAlign: 'center' ,    
			closable: true ,     //是否可关闭
			collapsible: true ,  //是否可收缩
			draggable: true ,    
			resizable: false ,    
			modal: true ,    
			border: false ,  
			bodyStyle: 'padding:2px 0 0 20px;' ,    //上－右－下－左
			items:[form1,form2],    
			//buttons:[]    
			buttons:[{
				text:"提交"
			},{
				text:"本地读取",
				handler:function(){
					var json={
						userName:"小明",
						password:"admin",
						userName2:"小明2",
						password2:"admin2"
					};
					Ext.getCmp('form1').getForm().setValues(json); //通过getCmp方式获取formpanel（formpanel必须指定id）
					//form1.getForm().setValues(json);
					form2.getForm().setValues(json);
				}
			}],    
			keys:[{  //处理键盘回车事件    
				key:Ext.EventObject.ENTER,    
				fn:onOK,    
				scope: this    
			}] 
		}).show();    
	});

     原本我的思路是想先定义两个formpanel（当然可能是更多），然后用一个总的formpanel（这里是指form3）把先定义的formpanel作为item包括进去，最后把总的formpanel（这里是指form3）放入一个window容器中（此处指w），window容器中在放处理事件的按钮在（保存、重置等），这样的话在window中批处理formpanel中的控件会比较方便，比如填充字段数值的话只要form3.getForm().setValues(json); 这么几句话就可以搞定，而不是像现在这样，需要对window中的每个formpanel进行填充数据。
     在实际应用当中遇到了一个问题，就是formpanel嵌套formpanel的话，formpanel必须制定renderTo 的 dom 容器，这点我觉得很郁闷，而且实际项目中不好操作，不知道大家有没有什么好的办法，小弟对formpanel确实不算熟悉。

　　附件下载 （注：ext包需要自己下载，以及更改ext目录）