|
|
下面通過一個例子來介紹基本Form的使用。由于使用Form要和服務器端程序交互，方便起見，新建一個ASP.NET站點，把extjs的所有文件都添加到站點下面，再新建一個forms.htm文件，作為此次的樣例文件，如下圖：
下面為forms.htm添加代碼，主要是為FormPanel添加表單項：
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Extjs FormPanel</title>
<link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />
<style type="text/css">
.allow-float{clear:none !important;}
.stop-float{ clear:both !important;}
.float-left{float:left;}
</style>
<script type="text/Javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/Javascript" src="ext-3.1.0/ext-all.js"></script>
<script type="text/Javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif';
Ext.QuickTips.init(); //初始化信息提示功能
var loginForm = new Ext.form.FormPanel({
title: 'A Simple FormPanel',
height: 300,
width: 300,
frame: true,
labelSeparator: ':',
labelWidth: 60,
labelAlign: 'right',
applyTo: 'form',
items: [
new Ext.form.TextField({
id: 'Name',
fieldLabel: 'Name',
allowBlank: false,
blankText: '必填字段',
msgTarget: 'qtip'
}),
new Ext.form.TextField({
id:'Password',
fieldLabel: 'Password',
allowBlank: false,
inputType: 'password',
blankText: '必填字段',
//msgTarget: 'qtip'
msgTarget: 'side'
}),
new Ext.form.TextField({
id: 'email',
fieldLabel: 'E-Mail',
allowBlank: false,
selectOnFocus: true,
inputType: 'Text',
msgTarget: 'side', emptyText: '必填字段',
regex: /^([/w]+)(.[/w]+)*@([/w-]+/.){1,5}([A-Za-z]){2,4}$/,
regexText: 'Email 格式不正確'
}),
new Ext.form.NumberField({
id: 'age',
fieldLabel: 'Age',
allowNegative: false,
decimalPrecision: 0,
maxValue: 100,
maxText: '輸入的數字最大是100'
}),
new Ext.form.TextArea({
id: 'remark',
fieldLabel: 'Remark',
width: 200
}),
new Ext.form.Radio({
name: 'sex',
itemCls: 'float-left',
clearCls: 'allow-float',
fieldLabel: 'Sex',
boxLabel: 'Male'
}),
new Ext.form.Radio({
name: 'sex',
clearCls: 'stop-float',
boxLabel: 'Female',
hideLabel: true
}),
new Ext.form.Checkbox({
name: 'hobby',
clearCls: 'allow-float',
itemCls: 'float-left',
boxLabel: 'Football',
fieldLabel: 'Hobby'
}),
new Ext.form.Checkbox({
name: 'hobby',
clearCls: 'allow-float',
itemCls: 'float-left',
hideLabel: true,
boxLabel: 'Ping-Pang'
}),
new Ext.form.Checkbox({
name: 'hobby',
clearCls: 'stop-float',
hideLabel: true,
boxLabel: 'Basketball'
})
],
buttons: [new Ext.Button({
text: 'OK',
handler: login
})
]
});
function login() {
loginForm.getForm().submit({
clientValidation: true,
waitMsg: 'Please wait...',
waitTitle: 'Hint',
url: 'simpleForm.ashx',
method: 'GET',
success: function(form, action) {
Ext.Msg.alert('Hint', 'Get Success:Your Name is '+action.result.msg.Name+" Pwd: "+action.result.msg.Password);
},
failure: function(form, action) {
Ext.Msg.alert('Hint', 'Get Failed' + action.failureType);
}
});
};
});
</script>
</head>
<body>
<div id="form">
</div>
</body>
</html>
構造FormPanel的時候需要通過applyTo屬性指定將這個Panel加載到什么區域，applyTo的值一般是div的id。FormPanel的items屬性就是一個表單項的數組。TextField可以指定是否允許為空，NumberField也可以，還可以指定最大值、最小值的限制。值得注意的是這些表單項中的itemCls和clearCls屬性，可以通過這些屬性給表單項附加css以實現自己想要的效果。其中itemCls是附加在表單項本身上面的，clearCls是附加在一個緊貼著該表單項的空白div上面的。buttons屬性中可以添加按鈕對象。暫時忽略提交函數，到現在為止，一個表單已經完成：
這個表單具有較一致的外觀，也具有了常見的驗證功能，關于更多extjs的表單驗證功能，以后再介紹。下面介紹表單的提交。表單的提交依靠的是Basicform的submit方法。可以通過調用FormPanel的getForm方法獲得BasicForm，再調用它的submit方法，submit方法中主要的參數是要提交的url地址，提交的方式GET/POST，以及提交失敗和成功后的兩個處理函數sucess和failure。這兩個處理函數都有兩個參數，一個是當前的form還有一個是Action對象，Action對象中主要記錄了這次提交（也可以是加載）的主要信息，主要有失敗類型failureType,和服務器端的返回信息result。failureType可以是Action.CLIENT_INVALID,CONNTECT_FALIURE,LOAD_FALURE,SERVER_INVALID, 這些都是在Action中定義的公共屬性，實際上是一個string。下面主要介紹從服務器返回的result，extjs對于從服務器端返回的信息有著比較嚴格的要求，默認情況下，服務器端返回的應該是一個json字符串，且其中有一個屬性是success，類型是boolean，用來指示此次提交成功，其余的屬性可以是其他自定義的返回數據。
例如下面就是一個服務器端返回的樣例：
復制代碼 代碼如下:
{
"success":true, // note this is Boolean, not string
"msg":"Updated Successfully!"
}
下面為這個htm頁面編寫一個服務器響應頁面，新建一個Generic Handler頁面 SimpleForm.ashx，這個響應很簡單，就是把提交上來的姓名和密碼再返回給客戶端。要返回的數據應該是類似于：
{success:true,msg:{Name:xxx,Password:xxxx}}
應此編寫此響應如下：
復制代碼 代碼如下:
public void ProcessRequest (HttpContext context) {
string s = context.Request.Params["Name"];
string pwd = context.Request.Params["Password"];
if (s == null) s = "null";
string result = "{success:true,msg:{Name:/""+s+"/",Password:/""+pwd+"/"}}";
context.Response.ContentType = "text/plain";
context.Response.Write(result);
}
運行程序，填寫必要的信息，點擊OK按鈕，可以看到從服務器端返回的數據：
最后介紹下如何從服務器端獲得表單的信息并且填充客戶端表單。要填充客戶端，使用的是BasicForm的load方法，該方法默認要求從服務器端獲得一個json字符串，和submit類似，也需要一個success屬性，其余的是表單字段信息，只要屬性的名字和表單項的名字相同，這個填充過程是自動完成的，這點很方便。為這個表單添加一個load按鈕，用來從服務器獲取表單信息： 復制代碼 代碼如下:
buttons: [new Ext.Button({
text: 'OK',
handler: login
}),
new Ext.Button({
text: 'Load',
handler: loadData
})
]loadData的方法為：function loadData() {
loginForm.getForm().load({
clientValidation: false,
waitMsg:'Loading...',
url: 'simpleFormLoad.ashx',
method: 'GET'
});
}注意，由于load數據不需要進行客戶端驗證，所以將clientValidation設為false。相應的simpleFormLoad.ashx服務器端代碼為：
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write("{success:true,data:{Name:/"ServerReply/",age:10,email:/"yinzixin1985@hotmail.com/"}}");
}
點擊Load按鈕，你將看到：
數據順利的從服務器端返回并且自動填充到表單中。
本文主要介紹extjs表單的基本概念，以及如何與服務器進行簡單的交互。這些內容并不足以應付實際需求，下面幾篇文章會介紹一些更加實用的內容。
JavaScript技術：Extjs學習筆記之二 初識Extjs之Form，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
