<divid="productForm"class="w_320">
<h2>ajax表单数据加载</h2>
</div>

<divid="loginForm"class="w_320">
<h2>ajax表单数据提交</h2>
</div>

<divid="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.OLsenLines',portOfLoading:'FxT',portOfDischarge:'OSL'
}
}*/

Ext.QuickTips.init();//初始化提示

varproductForm=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:newDate()
},{
name:'productId',xtype:'hidden',value:'001'//产品ID
},{
name:'introduction',fieldLabel:'产品简介',xtype:'textarea'
}],buttons:[{text:'加载简介',handler:loadIntroduction}]
});

//回调函数
functionloadIntroduction(){

varparams=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:'clientnotfound',portOfLoading:'Thisfieldmustnotbenull'
}
}*/

varloginForm=Ext.create('Ext.form.Panel',{

title:'表单提交示例',renderTo:'loginForm',defaultType:'textfield',//默认类型
fieldDefaults:{
width:260,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
}]

});
//登录函数
functionlogin(){
loginForm.getForm().submit({
clientValidation:true,//客户端验证
url:'../loginServer.jsp',success:function(form,action){
Ext.Msg.alert("提示","系统登录成功!");
},action){
console.info(action);
Ext.Msg.alert("提示","系统登录失败,原因:"+action.failureType);
}
});
}
//重置表单
functionreset(){
loginForm.form.reset();
}


//三、标准模式的表单数据提交
vardownloadForm=Ext.create('Ext.form.Panel',{

title:'标准表单提交',width:230,renderTo:'downloadForm',standardSubmit:true,//使用Ext.form.action.StandardSubmit提交数据
defaultType:'textfield',labelWidth:50,labelSeparator:':',items:[{
name:'fileName',fieldLabel:'文件名',buttons:[{
text:'文件下载',handler:downFile
}]
});
//回调函数
functiondownFile(){

downloadForm.getForm().submit({
clientValidation:true,url:'../downloadServer.jsp','文件下载失败!');
}
});
}
});

productServer.jsp

<%@pagelanguage="java"contentType="text/html;charset=utf-8"import="java.util.*"pageEncoding="utf-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%--

成功：{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}
失败：{success:false,errorMessage:'数据不存在'}

--%>
<%
StringproductId=request.getParameter("productId");
Stringmsg="";
if("001".equals(productId)){
msg="{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";
}else{
msg="{success:false,errorMessage:'数据不存在'}";
}
response.getWriter().write(msg);
%>

loginServer.jsp

<%@pagelanguage="java"contentType="text/html;charset=utf-8"import="java.util.*"pageEncoding="utf-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%--

成功：{success:true,errorMessage:'数据不存在'}

--%>
<%
Stringpassword=request.getParameter("password");
Stringmsg="";
if(password.length()<6){//密码不足六位验证失败
msg="{success:false,errors:{password:'密码不得小于六位数字'}}";
}else{
msg="{success:true}";
}
response.getWriter().write(msg);
%>

downloadServer.jsp

<%@pagelanguage="java"contentType="text/html;charset=utf-8"import="java.util.*"pageEncoding="utf-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%
StringfileName=request.getParameter("fileName")+".txt";
response.setContentType("application/x-msdownload");
response.setHeader("Content-disposition","attachment;filename="+fileName);
response.getWriter().write("下载文件内容");
%>