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目录）