前言 :
在了解表單面板, 表單組件和表單驗證後, 接著我們要開始學習表單的提交與加載. 這部分內容涉及表單與服務器之間的交互, 一方面是將用戶輸入訊息發往服務器, 另一種是將已有訊息從服務器讀出並顯示在表單中. 下面介紹的 Ext.form.Action 類就是用來處理這些常見表單操作.
Ext.form.Action 基類 :
Ext.form.Action 類主要提供表單相關的一些操作, 它只在執行 submit 或 load 時被創建. 通常透過設置該類的 method 可以執行不同的動作, 包括 submit, load 和 doAction, 動作執行後結果是成功還是失敗調用相應的回調方法.
ExtJS 不但提供 Ext.form.Action 類, 還在這個基類上擴展了 Ext.form.Action.Load 類與 Ext.form.Action.Submit 類. 分別負責表單的讀取與提交, 由於是擴展自 Ext.form.Action, 所以上面表格 4-24, 4-25 列出配置項都適用於這兩個類. 下面是關於這兩個類別的說明.
- Ext.form.Acton.Submit
該類別用於提交表單數據並處理返回結果, 並且只在表單提交時被創建, 要求返回的訊息中必須有一個 boolean 類型的屬性 success 表示提示是否成功和一個可選屬性 errors 中將包含無效字段的錯誤訊息. 下面是一個返回訊息範例 :
{
success: false, // 表示表單提交數據是否成功
errors: {
clientcode: "Client not found",
portOfLoading: "This field must not be null"
}
}2. Ext.form.Action.Load
該類用於讀取服務器數據到表單中, 並且只在表單提交時被創建, 要求返回訊息中必須有一個 boolean 類型的屬性 success 表示加載是否成功和一個 data 屬性, data 屬性包含要被加載的字段值訊息. 下面是一個返回訊息範例 :
{
success: true, // 表示加載數據是否成功
data: {
clientName: "Fred. Olsen Lines",
portOfLoading: "FXT",
portOfDischarge: "OSL"
}
}
下表示 Ext.form.Action.Submit 新增的配置項 :
表單數據加載 :
表單數據的加載基本上可以分成兩類, 即同步加載和異步加載. 這兩種方式各自有其適用範圍, 就一般情況來說, 對於必然出現在表單中的數據採用同步加載方式比較好, 避免多次訪問服務器造成效率損失. 而對於很少使用或不是每次都會出現在表單上的數據以異步方式加載來減少讀取的數據量, 以增加訪問速度.
客戶端代碼 : 在代碼 4-19 中將創建一個表單, 部分字段採用同步加載方式, 另一部分字段採用異步加載的方式. 參考帶碼如下.
- e4-19.html :
...
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../ext2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var productForm = new Ext.form.FormPanel({
title:'表單加載範例',
labelWidth : 100,
width : 300,
height: 230,
frame : true,
labelSeparator :':',
applyTo :'form',
items:[
new Ext.form.TextField({
fieldLabel:'產品名稱',
name : 'productName',
width : 150,
value:'U盤'//同步載加載數據
}),
new Ext.form.NumberField({
fieldLabel:'金額',
name : 'price',
width : 150,
value : 100//同步載加載數據
}),
new Ext.form.DateField({
fieldLabel:'生產日期',
format:'Y年m月d日',
width : 150,
name : 'date',
value : new Date()//同步載加載數據
}),
new Ext.form.TextArea({
id : 'introduction',
name : 'introduction',
fieldLabel:'產品簡介',
width : 150//異步加載數據
})
],
buttons:[
new Ext.Button({
text : '加載簡介',
handler : loadCallBack
})
]
});
//表單加載數據的回調函式
function loadCallBack(){
productForm.form.load({
waitMsg : '正在加載產品簡介訊息',//提示訊息
waitTitle : '提示',//表提
url : 'productServer.jsp',//請求的 url
method:'GET',//請求方式
success:function(form,action){//加載成功的調用函式
//Ext.Msg.alert('提示','產品簡介加載成功!');
},
failure:function(form,action){//加載失敗的處理函式
Ext.Msg.alert('提示','產品簡介加載失敗
失敗原因: '+action.failureType);
}
});
}
});
</script>
...- productServer.jsp : 服務器端代碼, 用於生成表單加載的產品簡介數據.
<%@ page language="java" contentType="text/html; charset=BIG5"
pageEncoding="BIG5"%>
<%
String msg = "產品簡介, 美觀實用, 售後服務佳!";
String respMsg = "{success:true, data:{introduction: '"+msg+"'}}";
response.getWriter().write(respMsg);
%>
執行結果 :
表單數據提交 :
表單數據提交與數據加載相比使用頻率還要更頻繁, 表單數據提交也有兩種方式, 分別是同步與異步 (Ajax) 方式. 這裡介紹表單的異步提交方式, 這也是 ExtJS 表單支持的默認方式. 在下面代碼將以創建一個用戶登陸頁面為目標, 要求用戶輸入用戶名與密碼. 用戶名採用前台驗證方式, 限定輸入格式必須為 E-Mail, 密碼採服務器驗證方式. 檢驗密碼是否達到 6 位, 全部驗證通過顯示登陸成功.
- e4-20.html : 客戶端代碼
...
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../ext2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var loginForm = new Ext.form.FormPanel({
title:'表單提交範例',
labelWidth : 60,
width : 230,
height: 130,
frame : true,
labelSeparator :':',
applyTo :'form',
items:[
new Ext.form.TextField({
fieldLabel:'用戶名',
name : 'userName',
allowBlank : false,
vtype:'email'
}),
new Ext.form.NumberField({
fieldLabel:'密碼',
name : 'password',
inputType : 'password',
allowBlank : false
})
],
buttons:[
new Ext.Button({
text : '登陸',
handler : login
}),
new Ext.Button({
text : '重置',
handler : reset
})
]
})
function login(){//提交表單
loginForm.form.submit({
clientValidation:true,
waitMsg : '正在登錄系統, 請稍候...',//提示訊息
waitTitle : '提示',//標題
url : 'loginServer.jsp',//請求的 url
method:'GET',//請求方式
success:function(form,action){
Ext.Msg.alert('提示','系統登錄成功!<br/>進入登入頁面...');
document.location='success.html'; // 進入登入頁面
},
failure:function(form,action){
Ext.Msg.alert('提示','系統登陸失敗!, 原因：'+action.failureType);
}
});
}
function reset(){
loginForm.form.reset();
}
});
</script>
...
- loginServer.jsp : 服務器端代碼, 驗證密碼長度是否大於6碼.
<%@ page language="java" contentType="text/html; charset=BIG5"
pageEncoding="BIG5"%>
<%
String pwd = request.getParameter("password");
String msg="";
if(pwd.length()<6){
msg = "{success:false,errors:{password:'密碼不可少於六碼!'}}";
} else {
msg = "{success:true}";
}
response.getWriter().write(msg);
%>
執行結果 (輸入密碼只有三碼) : 提交表單並檢視表單錯誤訊息.
執行結果 (輸入六碼) :
補充說明 :
* ExtJS 表單 FormPanel 提交數據與加載數據
* ExtJS 亂碼可能解決方法
