代码如下:
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目录)