运用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 += '&paramCount=1';
openUrl +=  '&param_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 += '&paramCount=9';
       saveUrl += '&param_0='+ Ext.getCmp('i_id').getValue();
           saveUrl += '&param_1='+ Ext.getCmp('i_name').getValue();
           saveUrl += '&param_2='+ Ext.getCmp('i_pass').getValue();
           saveUrl += '&param_3='+ Ext.getCmp('i_mobile').getValue();
           saveUrl += '&param_4='+ Ext.getCmp('i_phone').getValue();
           saveUrl += '&param_5='+ Ext.getCmp('i_code').getValue();
           saveUrl += '&param_6='+ Ext.getCmp('i_emai').getValue();
           saveUrl += '&param_7='+ Ext.getCmp('i_desc').getValue();
    saveUrl += '&param_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;
}













}