ExtJS用formPanel来做为表单元素的容器。默认情况下,是使用Ajax异步提交。接下来,对formPanel的提交跟加载,做个小总结。
先来看布局代码
1
var
frm
2
Ext.onReady(
function
() {
3
Ext.QuickTips.init();
4
Ext.form.Field.prototype.msgTarget
=
'
under
'
;
5
new
Ext.FormPanel({
6
labelWidth:
75
,
7
id:
'
frm
'
,
8
frame:
true
,
9
title:
'
simple form
'
,
10
bodyStyle:
'
padding: 5px
'
,
11
width:
350
,
12
defauls: { width:
230
},
13
defaultType:
'
textfield
'
,
14
applyTo:
'
con
'
,
15
autoHeight:
true
,
16
items: [
17
{
18
fieldLabel:
'
First Name
'
,
19
name:
'
first
'
,
20
allowBlank:
false
21
}, {
22
fieldLabel:
'
Last Name
'
,
23
name:
'
last
'
24
}, {
25
fieldLabel:
'
Company
'
,
26
name:
'
company
'
27
}, {
28
fieldLabel:
'
Email
'
,
29
name:
'
email
'
,
30
vtype:
'
email
'
,
31
allowBlank:
false
32
}, {
33
xtype:
'
timefield
'
,
34
fieldLabel:
'
Time
'
,
35
name:
'
time
'
,
36
minValue:
'
8:00am
'
,
37
maxValue:
'
6:00pm
'
,
38
allowBlank:
true
39
}
40
],
41
buttons: [
42
{ text:
'
Save
'
, handler: submit },
43
{ text:
'
load
'
, handler: load },
44
{ text:
'
Reset
'
, handler: reset }
45
]
46
});
47
frm
=
Ext.getCmp(
'
frm
'
);
48
});
效果如下:

变量frm是全局变量,用以保存对formPanel的引用。
一、提交数据
1
function
submit() {
2
if
(
!
frm.getForm().isValid())
return
;
3
frm.getForm().submit({
4
waitMsg:
'
正在提交数据
'
,
5
waitTitle:
'
提示
'
,
6
url:
'
submit.ashx
'
,
7
method:
'
GET
'
,
8
success:
function
(form, action) {
9
Ext.Msg.alert(
'
提示
'
,
'
保存成功
'
);
10
},
11
failure:
function
(form, action) {
12
Ext.Msg.alert(
'
提示
'
,
'
原因如下:
'
+
action.result.errors.info);
13
}
14
});
15
}
服务器端代码:
1
<%
@ WebHandler Language
=
"
C#
"
Class
=
"
submit
"
%>
2

3
using
System;
4
using
System.Web;
5

6

public
class
submit : IHttpHandler
{
7
8
public void ProcessRequest (HttpContext context)
{
9
context.Response.ContentType = "text/json";
10
bool result = false;
11
// 简单的业务逻辑省略。可以从context.Request["表单的ID"]来读取从formPanel传递过来的表单值。
12
// 再根据这些值。做一系列的业务逻辑处理。
13
// 以下是提交成功与否,所做出的反馈。
14
if (result)
15
{
16
context.Response.Write("{ success: true, errors:{} }");
17
}
18
else
19
{
20
context.Response.Write("{ success: false, errors:{info: '错误了'} }");
21
}
22
23
}
24
25
public bool IsReusable
{
26
get
{
27
return false;
28
}
29
}
30
31
}
注意,无论成功与否,服务器端返回的JSON代码,一定要符合如下格式:
{ success: true, errors: {} }
success属性用于指定操作是否成功,客户端以此来判断执行的success回调还是failure回调。errors是自定义的错误信息对象。可以向里面传递你想要传递给回调函数的信息。例子中,在errors中定义了一个info属性,返回到客户端,则可以通过回调参数进行访问。比如。action.result.errors.info进行访问。
二、加载数据
客户端load函数,用以加载数据,并将数据加载到各个表单之中。
1
function
load() {
2
frm.getForm().load({
3
waitMsg:
'
正在加载数据
'
,
4
waitTitle:
'
提示
'
,
5
url:
'
Handler.ashx
'
,
6
method:
'
GET
'
,
7
success:
function
(form, action) {
8
Ext.Msg.alert(
'
提示
'
,
'
加载成功
'
);
9
}
10
});
11
}
服务端代码
1
<%
@ WebHandler Language
=
"
C#
"
Class
=
"
Handler
"
%>
2

3
using
System;
4
using
System.Web;
5

6

public
class
load : IHttpHandler
{
7
8
public void ProcessRequest (HttpContext context)
{
9
//string result = string.Format("{success: {0}, errors:{1}}", "false", "Hello world");
10
context.Response.ContentType = "text/json";
11
context.Response.Write(@"
12
{
13
success: true,
14
data: { first: 'tom', last: 'king', company: 'microsoft', email: 'czclkg@21cn.com', time: '10:00am' }
15
}
16
");
17
18
}
19
20
public bool IsReusable
{
21
get
{
22
return false;
23
}
24
}
25
26
}
注意,跟数据的提交一样,对于数据的加载,服务器端同样也要遵循一定的格式:
{ success: true, data: {表单id: 表单值} }
success属性作用同上。主要是data。data用以保存表单元素的数据。格式是将表单的id作为属性名称,表单值作为属性值。返回客户端后,ext自动分析data属性,并将各个表单值赋值到各个表单当中。
三、表单的重置
function reset() {
frm.getForm().reset();
}