Ajax表单
<div id="productForm" class="w_320"> <h2>ajax表单数据加载</h2> </div> <div id="loginForm" class="w_320"> <h2>ajax表单数据提交</h2> </div> <div id="downloadForm" class="w_320"> <h2>标准表单数据提交</h2> </div>
Ext.onReady(function(){
//表单的提交和加载
//表单与服务器之间的交互
//基础类(Ext.form.action.Action)
//扩展子类
//1.Ext.form.action.Submit
//2.Ext.form.action.StandardSubmit;
//3.Ext.form.action.Load;
//4.Ext.form.action.DirectSubmit;
//5.Ext.form.action.DirectLoad;
//数据的加载
//1.同步加载(必然出现在表单中的数据,避免多次访问服务器造成的效率损失。)
//2.异步加载(很少使用或者不是每次都会出现在表单上的数据,减少读取的数据量,增加访问速度。)
//一、Ajax模式的表单数据加载
//1.Ext.form.action.Load示例(要求返回的信息必须有boolean : success和 obj: data)
/*{
success : true,
data : {
clientName : 'Fred. OLsen Lines',
portOfLoading : 'FxT',
portOfDischarge : 'OSL'
}
}*/
Ext.QuickTips.init(); //初始化提示
var productForm = Ext.create('Ext.form.Panel',{
title : 'ajax加载数据',
width : 300,
renderTo : 'productForm',
frame : true,
bodyPadding : 5,
fieldDefaults : {
width : 200,
labelWidth : 80,
labelSeparator : ': '
},
items :[{
name : 'productName',
fieldLabel : '产品名称',
xtype : 'textfield',
value : 'U盘'
},{
name : 'price',
fieldLabel : '价格',
xtype : 'numberfield',
value : 100
},{
name : 'date',
fieldLabel : '生产日期',
xtype : 'datefield',
value : new Date()
},{
name : 'productId',
xtype : 'hidden',
value : '001'//产品ID
},{
name : 'introduction',
fieldLabel : '产品简介',
xtype : 'textarea'
}],
buttons : [{ text : '加载简介', handler : loadIntroduction }]
});
//回调函数
function loadIntroduction(){
var params = productForm.getForm().getValues();
productForm.getForm().load({
url : '../productServer.jsp',
method : 'GET',//请求方式
params : params,//传递参数
success : function(form,action){//成功处理函数
//console.info(action);
Ext.Msg.alert("提示","产品简介加载成功!");
},
failure : function(form,action){//失败处理函数
Ext.Msg.alert("提示","产品简介加载失败<br/>失败原因:"+action.result.errorMessage);
}
});
}
//二、Ajax模式的表单数据提交
//同步提交与异步提交(默认提交方式)
/*{
success : false,
errors : {
clientCode : 'client not found',
portOfLoading : 'This field must not be null'
}
}*/
var loginForm = Ext.create('Ext.form.Panel',{
title : '表单提交示例',
width : 300,
frame : true,
renderTo : 'loginForm',
bodyPadding : 5,
defaultType : 'textfield',//默认类型
fieldDefaults : {
width : 260,
labelWidth : 80,
labelSeparator : ": ",
msgTarget : 'side'
},
items : [{
name : 'userName',
fieldLabel : '用户名',
vtype : 'email',
allowBlank : false
},{
name : 'password',
fieldLabel : '密码',
inputType : 'password',
allowBlank : false
}],
buttons : [{
text : '登录',
handler : login
},{
text : '重置',
handler : reset
}]
});
//登录函数
function login(){
loginForm.getForm().submit({
clientValidation : true,//客户端验证
url : '../loginServer.jsp',
method : 'GET',
success : function(form,action){
Ext.Msg.alert("提示","系统登录成功!");
},
failure : function(form,action){
console.info(action);
Ext.Msg.alert("提示","系统登录失败,原因:"+action.failureType);
}
});
}
//重置表单
function reset(){
loginForm.form.reset();
}
//三、标准模式的表单数据提交
var downloadForm = Ext.create('Ext.form.Panel',{
title : '标准表单提交',
width : 230,
frame : true,
renderTo : 'downloadForm',
bodyPadding : 5,
standardSubmit : true, //使用Ext.form.action.StandardSubmit提交数据
defaultType : 'textfield',
fieldDefaults : {
width : 200,
labelWidth : 50,
labelSeparator : ': ',
msgTarget : 'side'
},
items : [{
name : 'fileName',
fieldLabel : '文件名',
allowBlank : false
}],
buttons : [{
text : '文件下载',
handler : downFile
}]
});
//回调函数
function downFile(){
downloadForm.getForm().submit({
clientValidation : true,
url : '../downloadServer.jsp',
method : 'GET',
failure : function(form,action){
Ext.Msg.alert("提示",'文件下载失败!');
}
});
}
});
productServer.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%--
成功：{ success : true, data : { introduction : '本产品美观实用，售后服务优秀。'}}
失败：{ success : false, errorMessage : '数据不存在'}
--%>
<%
String productId = request.getParameter("productId");
String msg = "";
if("001".equals(productId)){
msg = "{ success : true, data : { introduction : '本产品美观实用，售后服务优秀。'}}";
}else{
msg = "{ success : false, errorMessage : '数据不存在'}";
}
response.getWriter().write(msg);
%>
loginServer.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%--
成功：{ success : true, data : { introduction : '本产品美观实用，售后服务优秀。'}}
失败：{ success : false, errorMessage : '数据不存在'}
--%>
<%
String password = request.getParameter("password");
String msg = "";
if(password.length()<6){ //密码不足六位验证失败
msg = "{ success : false, errors : { password : '密码不得小于六位数字'}}";
}else{
msg = "{ success : true}";
}
response.getWriter().write(msg);
%>
downloadServer.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
String fileName = request.getParameter("fileName")+".txt";
response.setContentType("application/x-msdownload");
response.setHeader("Content-disposition", "attachment; filename="+fileName);
response.getWriter().write("下载文件内容");
%>