Extjs學(xué)習(xí)筆記之二 初識Extjs之Form
更新時間：2010年01月07日 18:07:21 作者：
form恐怕是Web開發(fā)中最常用的控件了，Extjs對普通的html form進行了一些封裝，使其具有基本的外觀和一些簡便的和服務(wù)器進行通信的方法。
Extjs中的表單組件是Ext.form.BasicForm，不過最簡單最常用的是Ext.form.FormPanel控件，它繼承自Panel，具有一定的界面顯示控制能力，它其中包含著一個BasicForm對象，用來執(zhí)行向服務(wù)器提交，加載等動作。Extjs也對常用的html表單項進行了封裝，提供了一些額外的功能，比如數(shù)據(jù)驗證。實際使用的時候只要向FormPanel中添加這些表單項即可。常見的表單項有，TextField，NumberField,Radio,CheckBox等。
下面通過一個例子來介紹基本Form的使用。由于使用Form要和服務(wù)器端程序交互，方便起見，新建一個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: '輸入的數(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的時候需要通過applyTo屬性指定將這個Panel加載到什么區(qū)域，applyTo的值一般是div的id。FormPanel的items屬性就是一個表單項的數(shù)組。TextField可以指定是否允許為空，NumberField也可以，還可以指定最大值、最小值的限制。值得注意的是這些表單項中的itemCls和clearCls屬性，可以通過這些屬性給表單項附加css以實現(xiàn)自己想要的效果。其中itemCls是附加在表單項本身上面的，clearCls是附加在一個緊貼著該表單項的空白div上面的。buttons屬性中可以添加按鈕對象。暫時忽略提交函數(shù)，到現(xiàn)在為止，一個表單已經(jīng)完成：
這個表單具有較一致的外觀，也具有了常見的驗證功能，關(guān)于更多extjs的表單驗證功能，以后再介紹。下面介紹表單的提交。表單的提交依靠的是Basicform的submit方法?？梢酝ㄟ^調(diào)用FormPanel的getForm方法獲得BasicForm，再調(diào)用它的submit方法，submit方法中主要的參數(shù)是要提交的url地址，提交的方式GET/POST，以及提交失敗和成功后的兩個處理函數(shù)sucess和failure。這兩個處理函數(shù)都有兩個參數(shù)，一個是當(dāng)前的form還有一個是Action對象，Action對象中主要記錄了這次提交（也可以是加載）的主要信息，主要有失敗類型failureType,和服務(wù)器端的返回信息result。failureType可以是Action.CLIENT_INVALID,CONNTECT_FALIURE,LOAD_FALURE,SERVER_INVALID, 這些都是在Action中定義的公共屬性，實際上是一個string。下面主要介紹從服務(wù)器返回的result，extjs對于從服務(wù)器端返回的信息有著比較嚴格的要求，默認情況下，服務(wù)器端返回的應(yīng)該是一個json字符串，且其中有一個屬性是success，類型是boolean，用來指示此次提交成功，其余的屬性可以是其他自定義的返回數(shù)據(jù)。
例如下面就是一個服務(wù)器端返回的樣例：
{
"success":true, // note this is Boolean, not string
"msg":"Updated Successfully!"
}
下面為這個htm頁面編寫一個服務(wù)器響應(yīng)頁面，新建一個Generic Handler頁面 SimpleForm.ashx，這個響應(yīng)很簡單，就是把提交上來的姓名和密碼再返回給客戶端。要返回的數(shù)據(jù)應(yīng)該是類似于：
{success:true,msg:{Name:xxx,Password:xxxx}}
應(yīng)此編寫此響應(yīng)如下：
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按鈕，可以看到從服務(wù)器端返回的數(shù)據(jù)：
最后介紹下如何從服務(wù)器端獲得表單的信息并且填充客戶端表單。要填充客戶端，使用的是BasicForm的load方法，該方法默認要求從服務(wù)器端獲得一個json字符串，和submit類似，也需要一個success屬性，其余的是表單字段信息，只要屬性的名字和表單項的名字相同，這個填充過程是自動完成的，這點很方便。為這個表單添加一個load按鈕，用來從服務(wù)器獲取表單信息：
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ù)不需要進行客戶端驗證，所以將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\"}}");
}
點擊Load按鈕，你將看到：
下面通過一個例子來介紹基本Form的使用。由于使用Form要和服務(wù)器端程序交互，方便起見，新建一個asp.net站點，把extjs的所有文件都添加到站點下面，再新建一個forms.htm文件，作為此次的樣例文件，如下圖：
下面為forms.htm添加代碼，主要是為FormPanel添加表單項：
復(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的時候需要通過applyTo屬性指定將這個Panel加載到什么區(qū)域，applyTo的值一般是div的id。FormPanel的items屬性就是一個表單項的數(shù)組。TextField可以指定是否允許為空，NumberField也可以，還可以指定最大值、最小值的限制。值得注意的是這些表單項中的itemCls和clearCls屬性，可以通過這些屬性給表單項附加css以實現(xiàn)自己想要的效果。其中itemCls是附加在表單項本身上面的，clearCls是附加在一個緊貼著該表單項的空白div上面的。buttons屬性中可以添加按鈕對象。暫時忽略提交函數(shù)，到現(xiàn)在為止，一個表單已經(jīng)完成：
這個表單具有較一致的外觀，也具有了常見的驗證功能，關(guān)于更多extjs的表單驗證功能，以后再介紹。下面介紹表單的提交。表單的提交依靠的是Basicform的submit方法?？梢酝ㄟ^調(diào)用FormPanel的getForm方法獲得BasicForm，再調(diào)用它的submit方法，submit方法中主要的參數(shù)是要提交的url地址，提交的方式GET/POST，以及提交失敗和成功后的兩個處理函數(shù)sucess和failure。這兩個處理函數(shù)都有兩個參數(shù)，一個是當(dāng)前的form還有一個是Action對象，Action對象中主要記錄了這次提交（也可以是加載）的主要信息，主要有失敗類型failureType,和服務(wù)器端的返回信息result。failureType可以是Action.CLIENT_INVALID,CONNTECT_FALIURE,LOAD_FALURE,SERVER_INVALID, 這些都是在Action中定義的公共屬性，實際上是一個string。下面主要介紹從服務(wù)器返回的result，extjs對于從服務(wù)器端返回的信息有著比較嚴格的要求，默認情況下，服務(wù)器端返回的應(yīng)該是一個json字符串，且其中有一個屬性是success，類型是boolean，用來指示此次提交成功，其余的屬性可以是其他自定義的返回數(shù)據(jù)。
例如下面就是一個服務(wù)器端返回的樣例：
復(fù)制代碼 代碼如下:
{
"success":true, // note this is Boolean, not string
"msg":"Updated Successfully!"
}
下面為這個htm頁面編寫一個服務(wù)器響應(yīng)頁面，新建一個Generic Handler頁面 SimpleForm.ashx，這個響應(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);
}
運行程序，填寫必要的信息，點擊OK按鈕，可以看到從服務(wù)器端返回的數(shù)據(jù)：
最后介紹下如何從服務(wù)器端獲得表單的信息并且填充客戶端表單。要填充客戶端，使用的是BasicForm的load方法，該方法默認要求從服務(wù)器端獲得一個json字符串，和submit類似，也需要一個success屬性，其余的是表單字段信息，只要屬性的名字和表單項的名字相同，這個填充過程是自動完成的，這點很方便。為這個表單添加一個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ù)不需要進行客戶端驗證，所以將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\"}}");
}
點擊Load按鈕，你將看到：
數(shù)據(jù)順利的從服務(wù)器端返回并且自動填充到表單中。
本文主要介紹extjs表單的基本概念，以及如何與服務(wù)器進行簡單的交互。這些內(nèi)容并不足以應(yīng)付實際需求，下面幾篇文章會介紹一些更加實用的內(nèi)容。
相關(guān)文章
Extjs EditorGridPanel中ComboBox列的顯示問題
EditorGridPanel中嵌入ComboBox通常不會正常顯示ComboBox的store中本想顯示字段，而是顯示的EditorGridPanel中 store的dataindex指定的字段內(nèi)容。2011-07-07
最近在做一個項目時，項目中使用了ExtJS，有些內(nèi)容要分頁簽顯示，而出于項目要求，頁簽只能垂直分布2009-06-06
Extjs4.0 ComboBox如何實現(xiàn)三級聯(lián)動
Extjs4.0 ComboBox如何實現(xiàn)三級聯(lián)動，許多網(wǎng)友都很好奇這個問題，明確的一點是在extjs4.0中要使用load來獲取數(shù)據(jù)，到底如何實現(xiàn)，下面小編為大家分享具體步驟2016-05-05
ExtJS是一個Ajax框架，是一個用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用程序界面。ExtJS可以用來開發(fā)RIA也即富客戶端的AJAX應(yīng)用2008-12-12
extjs關(guān)于treePanel+chekBox全部選中以及清空選中問題探討
treePanel+chekBox全部選中以及清空選中，想必大家在學(xué)習(xí)使用過程中都見過這種效果吧，接下來為大家詳細介紹下實現(xiàn)過程及細節(jié)，感興趣的朋友可以參考下哈2013-04-04
Extjs 本身是一個加載慢的JS框架，這次來寫寫怎么減少冗余代碼，也是提高運行速度，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
Extjs學(xué)習(xí)筆記之九 數(shù)據(jù)模型(上）
本文開始進入Extjs最核心最優(yōu)秀的部分。2010-01-01
extjs_02_grid顯示本地數(shù)據(jù)、顯示跨域數(shù)據(jù)
這篇文章主要介紹了extjs_02_grid顯示本地數(shù)據(jù)、顯示跨域數(shù)據(jù)的具體實現(xiàn),需要的朋友可以參考下2014-06-06
有時候我們在新建列表中的一項后需要進入立刻進入詳細信息的編輯頁面，為了使得操作簡便，一般設(shè)定自動導(dǎo)向。2010-04-04
extjs實現(xiàn)的分頁，使用jsp傳遞數(shù)據(jù)，具體實現(xiàn)過程如下，需要的朋友莫錯過2014-07-07