ExtJs--FormPanel简单与后台交互
先看页面中的写法：var frm;Ext.onReady(function(){ var form1 = new Ext.FormPanel({ frame : true, width : 300, id : "frm", layout : "form", title : "添加个人信息", labelWidth : 70, labelAlign : "left", renderTo : "form1", items : [{ xtype : "textfield", fieldLabel : "用户名", name : "username", allowBlank : false, blankText : "不能为空！请正确填写!", anchor : "90%" },{ xtype : "textfield", fieldLabel : "昵称", name : "smallname", anchor : "90%" },{ xtype : "datefield", fieldLabel : "注册日期", name : "regdate", anchor : "90%" }], buttons : [{ text : "提交", handler : submit },{ text : "加载", handler : load },{ text : "取消", handler : reset }] }) frm = Ext.getCmp("frm"); //这两句话的意思是：校验 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side';})/**submit**/function submit() { if (!frm.getForm().isValid())return; frm.getForm().submit({ waitMsg : "正在提交数据……", waitTitle : "提示", url : "http://localhost:8080/ExtJsApp/formServlet", method : "post", success : function(form, action) { Ext.Msg.alert("提示","保存成功!"); }, failure : function(formm, action) { Ext.Msg.alert("提示","保存失败:" + action.result.errors.info); } });}/**load**/function load() { frm.getForm().load({ waitMsg : "正在加载数据……", waitTitle : "提示", url : "http://localhost:8080/ExtJsApp/formServlet", method : "get", success : function (form, action) { Ext.Msg.alert("提示","加载成功!"); } })}/**reset**/function reset() { frm.getForm().reset();}
后台servlet：
@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json; charset=utf-8");String username = request.getParameter("username");String smallname = request.getParameter("smallname");if (username.equalsIgnoreCase("admin") && smallname.equalsIgnoreCase("ad")) { response.getWriter().print("{success:true,errors:{}}");} else { response.getWriter().print("{success:false,errors:{info:'出错了!'}}");}}
总结：
1、表单动作是表单中数据的加载。要给表单中的字段设置值，可以通过调用字段的setValue方法，也可以直接在初始化字段的时候在配置参数中设置value属性值，另外还有一种方法是通过Ajax的方式从服务器端加载表单中各个字段的值。这种方式也就是我们这里要介绍的表单数据加载。
ExtJS的表单数据加载通过BasicForm的load方法来进行，表单数据加载动作由类Ext.form.Action.Load定义，执行数据加载动作会到服务器端加载数据，默认情况下服务器端需要返回一个包含success属性及data属性的JSON对象。
2、Ext.Ajax.request() : Number
服务器的响应是异步的，因此需要在回调函数中处理服务器端返回的数据。回调函数可以定义在request方法调用的参数options中。另外，在request方法中可以定义Ajax请求的一些其它属性。参数options是一个对象，该对象包含了Ajax请求所需的各种参数及回调处理参数等。options中可以包含的各个属性及含义如下所示：
url String 指定要请求的服务器端url，默认值为Ajax对象中配置的URL参数值。
params Object/String/Function 指定要传递的参数，可以是一个包含参数名称及值的对象，也可以是name=xx&birthday=1978-1-1类似的url编码字符串，或者是一个能返回上述两种内容的函数。
method String 指定发送Ajax请求使用的method，可以是GET或POST方式。默认情况下，如果请求中没有传递任何参数则使用GET，否则使用POST。
callback Function 指定Ajax请求的回调函数，该函数不管是调用成功或失败，都会执行。传递给回调函数的参数有三个，第一个 options表示执行request方法时的参数，第二个success表示请求是否成功，第三个参数response表示用来执行Ajax请求的 XMLHttpRequest 对象。关于XMLHttpRequest可以通过http://www.w3.org/TR/XMLHttpRequest/查询详细的信息。
success Function 指定当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。
failure Function 指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。
scope Object 指定回调函数的作用域，默认为浏览器window。
form Object/String 指定要提交的表单id或表单数据对象。
isUpload Boolean 指定要提交的表单是否是文件上传表单，默认情况下会自动检查。
headers Object 指定请求的Header信息。
xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
jsonData Object/String 指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
disableCaching Boolean 是否禁止cache。
转自 http://devbbs.doit.com.cn/thread-11788-1-1.html
页:
[1]