Ext之自动加载Form
最近客户提了一个新需求，大体如下；当他们在填充信息的form中输入了一个输入域（在数据库对应字段为主键）之后，鼠标离开后，程序自动检查有没有对应记录，如果有的话，把数据库中记录的各字段填充到当前form;刚开始是想用一个Ext.Ajax来解决问题，不过觉得这样的方式比较麻烦，最后还是用Ext自带的load来做，用这种方法不再要对服务器返回的数据做任何的后处理，而是自动的把后台返回的数据填充到当前对应字段，真是high到极点了；思路大体如下：
1 编写页面，并用某个动作或者事件注册页面中的 form的load事件
2 后台返回数据 自动填充到form
以下是对应的一 个demo:
1 页面代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试001.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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="../scripts/ext/examples.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
var testForm;
var testWindow;
function doSubmit(){
alert("准备load信息");
testForm.form.load({
waitTitle:'请稍候',
waitMsg:'正在加载数据',
//url:"loadData.txt",
url:"../loadFormData.do",
success:function(action,form){ alert("result---"+action.result.sucess); alert("加载成功了");},
failure:function(action,form){alert("result---"+action.result.failure);alert("加载失败------");}
});
}
function createForm(){
testForm=new Ext.FormPanel({
id:'testform',
name:'testform',
frame:true,
width:400,
height:400,
items:[{
xtype:'fieldset',
title:'学生基本信息',
id:'stuinfo',
name:'stuinfo',
width:400,
height:200,
collapsible:true,
items:[{
xtype:'textfield',
fieldLabel:'名字008',
name:'name',
id:'name',
//value:'http://',
anchor:'95%',
listeners:{
blur:function(tf){
if(tf.getValue().trim().length>0){
testForm.getForm().load({
url:'../loadFormData.do',
params:{
pid:tf.getValue()
},
success:function(form,action){
alert("公司资料加载成功了");
},
failure:function(form,action){
alert("公司资料加载失败了");
}
});
}else{
alert("请填写name");
}
}
}
},
{
xtype:'textfield',
fieldLabel:'性别',
id:'sex',
name:'sex',
anchor:'95%'
}
]
}],
buttons:[
{
text:'提交',
handler:doSubmit
},{
text:'清空'
}
],
keys:[{
key:Ext.EventObject.ENTER,
fn:doSubmit,
scope:this
}]
});
testWindow=new Ext.Window({
id:'testwindow',
name:'testwindow',
width:testForm.width,
//height:testForm.width,
items:[testForm],
onEsc:function(){
alert("关闭了");
}
});
testWindow.show();
}
Ext.onReady(function(){
Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget='side';
createForm();
});
</script>
</head>
<body>
</body>
</html>
2 后台代码：
package action;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import entity.Person;
import service.TreeService;
import util.Factory;
import util.Print;
import util.Tools;
public class LoadFormDataAction extends Action{
private TreeService treeService;
private PrintWriter out;
public ActionForward execute(ActionMapping mapping,ActionForm form,
HttpServletRequest request,HttpServletResponse response)throws Exception{
Print.contrlPrint("到达了LoadFormDataAction");
response.setContentType("text/x-json;charset=UTF-8");
System.out.println("pid---"+request.getParameter("pid"));
out=response.getWriter();
Person p=new Person();
p.setName("name");
p.setSex("100");
/*
* {
success: true ,data:{
name: "name" ,
sex: 100
}
}
*
* */
String json="{success:true,data:"+Tools.ObjToJson(p)+"}";
System.out.println("json--\n"+json);
out.println(json);
out.flush();
out.close();
return null;
}
}
后台返回数据格式如下：
{success:true,data:{"name":"name","sex":"100"}}