项目中遇到一个问题,
1。有一个formpanel:regform,里面有个FieldSet,取名reg1;(见图1)
2。点击动态创建reg2按钮的时候创建FieldSet,取名reg2,通过Ext.getCmp("regForm").add(reg2)方法把reg2放入regrorm的items里;(见图2)
3。然后点击提交的时候调用if (regForm.form.isValid()) {}方法,但是这样只能验证第一个FieldSet里的值,却不会验证第二个FieldSet里的值;另外reg2是动态创建的,也许有几十个,所以不能单独用get("")的方法验证!(见图3)
问题:就是如何解决这个问题,困扰了好几天了:Q
jsp页面(reg.jsp)
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>reg</title>
<link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="reg.js"></script>
</head>
<body>
<div id="reg"></div>
</body>
</html>
js脚本(reg.js)
Ext.QuickTips.init();
Ext.onReady(function() {
createForm();
});
function createForm() {
var reg1 = new Ext.form.FieldSet({
id : "reg1",
title : "基本信息",
autoHeight : true,
width : 500,
collapsible : true,
items : [{
xtype : "textfield",
name : "name",
fieldLabel : "姓名",
allowBlank : false,
blankText : "姓名不能为空"
}, {
xtype : "textfield",
name : "address",
fieldLabel : "地址",
allowBlank : false,
blankText : "地址不能为空"
}],
buttonAlign : "center",
buttons : [{
text : "动态创建reg2",
handler : function() {
var reg2 = Ext.getCmp("reg2");
if (reg2 != null) {
Ext.getCmp("regForm").remove(reg2);
Ext.getCmp("regForm").doLayout(reg2);
}
createReg2();
}
}]
});
var regForm = new Ext.form.FormPanel({
id : "regForm",
renderTo : "reg",
title : "注册",
items : [reg1],
style : 'text-align:center',
buttonAlign : "center",
buttons : [{
text : "提交",
handler : function() {
if (regForm.form.isValid()) {
}
}
}]
});
}
function createReg2() {
var reg2 = new Ext.form.FieldSet({
id : "reg2",
title : "联系方式",
width : 500,
autoHeight : true,
collapsible : true,
labelAlign : "right",
labelWidth : 70,
defaults : {
xtype : "textfield",
width : 200
}
});
var txtF1 = new Ext.form.TextField({
name : "telephone",
fieldLabel : "联系电话",
allowBlank : false,
blankText : "请输入4-32个字符"
});
var txtF2 = new Ext.form.TextField({
name : "email",
fieldLabel : "电子邮件",
allowBlank : false,
blankText : "请输入4-32个字符"
});
Ext.getCmp("reg2").add(txtF1);
Ext.getCmp("reg2").add(txtF2);
Ext.getCmp("regForm").add(reg2);
Ext.getCmp("regForm").doLayout(reg2);
}