|
|
下面通過一個(gè)例子來介紹基本Form的使用。由于使用Form要和服務(wù)器端程序交互，方便起見，新建一個(gè)ASP.NET站點(diǎn)，把extjs的所有文件都添加到站點(diǎn)下面，再新建一個(gè)forms.htm文件，作為此次的樣例文件，如下圖：
下面為forms.htm添加代碼，主要是為FormPanel添加表單項(xiàng)：
復(fù)制代碼 代碼如下:
<!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: '輸入的數(shù)字最大是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>
構(gòu)造FormPanel的時(shí)候需要通過applyTo屬性指定將這個(gè)Panel加載到什么區(qū)域，applyTo的值一般是div的id。FormPanel的items屬性就是一個(gè)表單項(xiàng)的數(shù)組。TextField可以指定是否允許為空，NumberField也可以，還可以指定最大值、最小值的限制。值得注意的是這些表單項(xiàng)中的itemCls和clearCls屬性，可以通過這些屬性給表單項(xiàng)附加css以實(shí)現(xiàn)自己想要的效果。其中itemCls是附加在表單項(xiàng)本身上面的，clearCls是附加在一個(gè)緊貼著該表單項(xiàng)的空白div上面的。buttons屬性中可以添加按鈕對象。暫時(shí)忽略提交函數(shù)，到現(xiàn)在為止，一個(gè)表單已經(jīng)完成：
這個(gè)表單具有較一致的外觀，也具有了常見的驗(yàn)證功能，關(guān)于更多extjs的表單驗(yàn)證功能，以后再介紹。下面介紹表單的提交。表單的提交依靠的是Basicform的submit方法。可以通過調(diào)用FormPanel的getForm方法獲得BasicForm，再調(diào)用它的submit方法，submit方法中主要的參數(shù)是要提交的url地址，提交的方式GET/POST，以及提交失敗和成功后的兩個(gè)處理函數(shù)sucess和failure。這兩個(gè)處理函數(shù)都有兩個(gè)參數(shù)，一個(gè)是當(dāng)前的form還有一個(gè)是Action對象，Action對象中主要記錄了這次提交（也可以是加載）的主要信息，主要有失敗類型failureType,和服務(wù)器端的返回信息result。failureType可以是Action.CLIENT_INVALID,CONNTECT_FALIURE,LOAD_FALURE,SERVER_INVALID, 這些都是在Action中定義的公共屬性，實(shí)際上是一個(gè)string。下面主要介紹從服務(wù)器返回的result，extjs對于從服務(wù)器端返回的信息有著比較嚴(yán)格的要求，默認(rèn)情況下，服務(wù)器端返回的應(yīng)該是一個(gè)json字符串，且其中有一個(gè)屬性是success，類型是boolean，用來指示此次提交成功，其余的屬性可以是其他自定義的返回?cái)?shù)據(jù)。
例如下面就是一個(gè)服務(wù)器端返回的樣例：
復(fù)制代碼 代碼如下:
{
"success":true, // note this is Boolean, not string
"msg":"Updated Successfully!"
}
下面為這個(gè)htm頁面編寫一個(gè)服務(wù)器響應(yīng)頁面，新建一個(gè)Generic Handler頁面 SimpleForm.ashx，這個(gè)響應(yīng)很簡單，就是把提交上來的姓名和密碼再返回給客戶端。要返回的數(shù)據(jù)應(yīng)該是類似于：
{success:true,msg:{Name:xxx,Password:xxxx}}
應(yīng)此編寫此響應(yīng)如下：
復(fù)制代碼 代碼如下:
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);
}
運(yùn)行程序，填寫必要的信息，點(diǎn)擊OK按鈕，可以看到從服務(wù)器端返回的數(shù)據(jù)：
最后介紹下如何從服務(wù)器端獲得表單的信息并且填充客戶端表單。要填充客戶端，使用的是BasicForm的load方法，該方法默認(rèn)要求從服務(wù)器端獲得一個(gè)json字符串，和submit類似，也需要一個(gè)success屬性，其余的是表單字段信息，只要屬性的名字和表單項(xiàng)的名字相同，這個(gè)填充過程是自動(dòng)完成的，這點(diǎn)很方便。為這個(gè)表單添加一個(gè)load按鈕，用來從服務(wù)器獲取表單信息： 復(fù)制代碼 代碼如下:
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數(shù)據(jù)不需要進(jìn)行客戶端驗(yàn)證，所以將clientValidation設(shè)為false。相應(yīng)的simpleFormLoad.ashx服務(wù)器端代碼為：
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write("{success:true,data:{Name:/"ServerReply/",age:10,email:/"yinzixin1985@hotmail.com/"}}");
}
點(diǎn)擊Load按鈕，你將看到：
數(shù)據(jù)順利的從服務(wù)器端返回并且自動(dòng)填充到表單中。
本文主要介紹extjs表單的基本概念，以及如何與服務(wù)器進(jìn)行簡單的交互。這些內(nèi)容并不足以應(yīng)付實(shí)際需求，下面幾篇文章會(huì)介紹一些更加實(shí)用的內(nèi)容。
JavaScript技術(shù)：Extjs學(xué)習(xí)筆記之二 初識Extjs之Form，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
