运用extjs技术进行form表单数据交互
运用extjs技术，从后台取出数据，自动填充到form表单里面，然后根据修改值在存储到数据库中。
运用到ajax交互技术，进行json格式数组的返回。
具体代码如下:
js代码：
Ext.BLANK_IMAGE_URL = basePath + 'ext/resources/images/default/s.gif';
Ext.SSL_SECURE_URL = basePath + 'ext/resources/images/default/s.gif';
var baseUrl = basePath + 'AjaxListener?className=com.dvision.digitalplatform.bizApp.modifyUser';
Ext.onReady(function(){
var openUrl = baseUrl +'&methodName=getUser';
openUrl += '¶mCount=1';
openUrl += '¶m_0='+ names;
//var ds = new Ext.data.Store({
// proxy: new Ext.data.HttpProxy({url:'grid.jsp'}),
// reader: new Ext.data.JsonReader({
// totalProperty: 'totalProperty',
// root: 'root',
// fields :['id','name','descn']
// } )
// });
//------------------------------------------------------------------------------------------------------
//编码方式
Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
//使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//定义表单
var simple = new Ext.FormPanel({
labelWidth: 75,
baseCls: 'x-plain',
defaults: {width: 150},
defaultType: 'textfield',//默认字段类型
reader: new Ext.data.JsonReader({
successProperty: 'success',
root: 'info'
},['USERID','USERNAME','PASSWORD','LINKMOBILE','LINKPHONE','POSTALCODE','EMAIL','USERDESC','ADDRESS']
),
//定义表单元素
items: [{
id:'i_id',
fieldLabel: '用户编号',
name: 'USERID',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank:false,//不允许为空
blankText:'id不能修改',//错误提示内容
disabled:true
},{
id:'i_name',
fieldLabel: '用户名称',
name: 'USERNAME',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank:false,//不允许为空
blankText:'用户名不能为空'//错误提示内容
},{
id:'i_pass',
fieldLabel: '用户密码',
//anchor:'95%',
name: 'PASSWORD',
allowBlank:false,
blankText:'密码不能为空'
},{
id:'i_mobile',
fieldLabel: '联系手机',
//anchor:'95%',
name: 'LINKMOBILE',
allowBlank:false,
blankText:'联系手机不能为空'
},{
id:'i_phone',
fieldLabel: '联系电话',
//anchor:'95%',
name: 'LINKPHONE',
allowBlank:false,
blankText:'联系电话不能为空'
},{
id:'i_code',
fieldLabel: '邮政编码',
//anchor:'95%',
name: 'POSTALCODE',
allowBlank:false,
blankText:'邮政编码不能为空'
},{
id:'i_emai',
fieldLabel: '邮件地址',
//anchor:'95%',
name: 'EMAIL',
allowBlank:false,
blankText:'邮件不能为空'
},{
id:'i_desc',
fieldLabel: '用户描述',
//anchor:'95%',
name: 'USERDESC',
allowBlank:false,
blankText:'用户描述不能为空'
},{
id:'i_add',
fieldLabel: '联系地址',
//anchor:'95%',
name: 'ADDRESS',
allowBlank:false,
blankText:'联系地址不能为空'
}
],
buttons: [{
text: '提交',
type: 'submit',
//定义表单提交事件
handler:function(){
if(simple.form.isValid()){//验证合法后使用加载进度条
Ext.MessageBox.show({
title: '请稍等',
msg: '正在加载...',
progressText: '',
width:300,
progress:true,
closable:false,
animEl: 'loding'
});
//控制进度速度
var f = function(v){
return function(){
var i = v/11;
Ext.MessageBox.updateProgress(i, '');
};
};
for(var i = 1; i < 13; i++){
setTimeout(f(i), i*150);
}
//----------------------------------------------------------------------------------------------------------------------
//提交到服务器操作
// simple.form.doAction('submit',{
// url:'',//文件路径
// method:'post',//提交方法post或get
//
// params:'',
// //提交成功的回调函数
// success:function(form,action){
// if (action.result.msg=='ok') {
// document.location='abc.jsp';
// } else {
// Ext.Msg.alert('登陆错误',action.result.msg);
// }
// },
// //提交失败的回调函数
// failure:function(){
// Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
// }
// });
saveUrl = '';
saveUrl = basePath+"AjaxListener?className=com.dvision.digitalplatform.bizApp.modifyUser";
saveUrl+="&methodName=updateUser";
saveUrl += '¶mCount=9';
saveUrl += '¶m_0='+ Ext.getCmp('i_id').getValue();
saveUrl += '¶m_1='+ Ext.getCmp('i_name').getValue();
saveUrl += '¶m_2='+ Ext.getCmp('i_pass').getValue();
saveUrl += '¶m_3='+ Ext.getCmp('i_mobile').getValue();
saveUrl += '¶m_4='+ Ext.getCmp('i_phone').getValue();
saveUrl += '¶m_5='+ Ext.getCmp('i_code').getValue();
saveUrl += '¶m_6='+ Ext.getCmp('i_emai').getValue();
saveUrl += '¶m_7='+ Ext.getCmp('i_desc').getValue();
saveUrl += '¶m_8='+ Ext.getCmp('i_add').getValue();
http.send(saveUrl,function(rtn){
if(rtn=='1')
{
Ext.Msg.alert("提示","更新信息成功! ");
popWin.hide();
// store.reload();
}
else if(rtn=='-1')
{
Ext.Msg.alert("提示","更新信息失败! ");
}
}
// ,Ext.util.JSON.encode(formStore)
);
}
}
},{
text: '取消',
handler:function(){simple.form.reset();}//重置表单
}]
});
simple.getForm().load({
url:openUrl
});
//定义窗体
win = new Ext.Window({
id:'win',
title:'用户资料修改',
layout:'fit', //之前提到的布局方式fit，自适应布局
width:300,
height:350,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,//禁止最大化
closeAction:'close',
closable:false,//禁止关闭
collapsible:true,//可折叠
plain: true,
buttonAlign:'center',
items:simple//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体
});
java代码：
package com.dvision.digitalplatform.bizApp;
import java.util.ArrayList;
import java.util.Hashtable;
import java.util.List;
import java.util.Vector;
import javax.servlet.ServletException;
import javax.servlet.http.HttpSession;
import net.sf.json.JSONArray;
import com.dvision.digitalplatform.ajaxUtil.DAO;
import com.dvision.digitalplatform.ajaxUtil.StringUtil;
public class modifyUser {
public String getUser(String names){
String rtn="";
DAO dao=new DAO();
Vector v=new Vector();
System.out.println(names);
System.out.println(names);
try {
String sql="select userid,username,linkphone,linkmobile,address,postalcode,email,userdesc,password from t_user WHERE username='admin'";
v=dao.execCommand(sql);
} catch (ServletException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
rtn = "{\"success\":\"" + true + "\",\"info\":"
+ JSONArray.fromObject(v).toString() + "}";
System.out.println(rtn);
return rtn;
}
public String updateUser(String i_id,String i_name,String i_pass,String i_mobile,String i_phone,String i_code,String i_emai,String i_desc,String i_add)
{
String sql="";
String rtn = "";
DAO dao=new DAO();
try {
// jsonStr = new String(jsonStr.getBytes("gbk"),"utf-8");
// JSONObject store=JSONObject.fromString(jsonStr);
// String id = store.getString("id");
// String name = store.getString("name");
// String fatherid= store.getString("fatherid");
// String url= store.getString("url");
// String sx= store.getString("sx");
// String depth = store.getString("depth");
i_name = StringUtil.isoToGbk(i_name);
i_pass = StringUtil.isoToGbk(i_pass);
i_mobile = StringUtil.isoToGbk(i_mobile);
i_phone = StringUtil.isoToGbk(i_phone);
i_code = StringUtil.isoToGbk(i_code);
i_emai = StringUtil.isoToGbk(i_emai);
i_desc = StringUtil.isoToGbk(i_desc);
i_add = StringUtil.isoToGbk(i_add);
sql="update t_user set username='"+ i_name +"',password='"+i_pass+"',linkmobile='"+i_mobile+"',linkphone='"+i_phone+"',postalcode='"+i_code+"', email='"+i_emai+"',userdesc='"+i_desc+"',address='"+i_add+"' where userid="+i_id;
// sql="update t_user (username,password,linkmobile,linkphone,postalcode,email,userdesc,address) set values ('"+i_name +"','"+i_pass +"','"+ i_mobile+"','"+ i_phone+"','"+ i_code+"','"+i_emai +"','"+ i_desc+"','"+ i_add+"')";
if(dao.execUpdate(sql))
rtn = "1";
else
rtn = "-1";
} catch (Exception e) {
e.printStackTrace();
System.out.println(sql);
}
return rtn;
}
}