1. 程式人生 > >運用extjs技術進行form表單資料互動

運用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;
}













}