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"}}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值