Ext之自动加载Form

qinjingkai

浏览: 259818 次
性别:
来自: 广州

最近访客更多访客>>

RacheAngel

ms143014

快乐编程

fallout2

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (74)

社区版块

存档分类

EXT json JavaScript Struts CSS

最近客户提了一个新需求，大体如下；当他们在填充信息的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"}}