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.異步加載(不多使用或者不是每次都會出如今表單上的數據,減小讀取的數據量,增長訪問速度。)
    
    //1、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);
            }
        });
    }
    
    
    //2、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();
    }
    
    
    //3、標準模式的表單數據提交
    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("下載文件內容");
%>