ExtJS用formPanel来做为表单元素的容器。默认情况下,是使用Ajax异步提交。接下来,对formPanel的提交跟加载,做个小总结。
先来看布局代码
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的引用。
一、提交数据
2 if ( ! frm.getForm().isValid()) return ;
3 frm.getForm().submit({
4 waitMsg: ' 正在提交数据 ' ,
5 waitTitle: ' 提示 ' ,
6 url: 'submit.ashx' ,//这里没使用asp.net网页
7 method: ' GET ' ,//指定为GET方式时,url中指定的参数将失效,表单项转换成url中的key=value传递给服务,见http://blog.csdn.net/goodshot/article/details/9116973
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 }
服务器端代码:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
7
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
8
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
9
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
10
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
11
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
12
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
13
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
14
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
15
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
16
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
17
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
18
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
19
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
20
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
21
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
22
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
23
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
24
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
25
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
26
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
27
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
28
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
29
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
30
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
31
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
注意,无论成功与否,服务器端返回的JSON代码,一定要符合如下格式(博主注:下面的error:{}不是必须的,不过http://blog.csdn.net/goodshot/article/details/9042771中的图片文档中也有提到,但是在实际测试时没有也可以通过):
{ success: true, errors: {} }
success属性用于指定操作是否成功,客户端以此来判断执行的success回调还是failure回调。errors是自定义的错误信息对象。可以向里面传递你想要传递给回调函数的信息。例子中,在errors中定义了一个info属性,返回到客户端,则可以通过回调参数(之前的success:等都是回调函数,见http://blog.csdn.net/goodshot/article/details/9116973下方红色字体)进行访问。比如。action.result.errors.info进行访问。
二、加载数据
客户端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 }
服务端代码
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
7
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
8
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
9
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
10
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
11
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
12
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
13
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
14
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
15
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
16
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
17
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
18
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
19
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
20
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
21
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
22
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
23
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
24
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
25
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
26
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
注意,跟数据的提交一样,对于数据的加载,服务器端同样也要遵循一定的格式:
{ success: true, data: {表单id: 表单值} }
success属性作用同上。主要是data。data用以保存表单元素的数据。格式是将表单的id作为属性名称,表单值作为属性值。返回客户端后,ext自动分析data属性,并将各个表单值赋值到各个表单当中。
三、表单的重置
function reset() {
frm.getForm().reset();
}