EXTJS 表单提交

EXTJS框架中,在提交表单时,可有3种方式:

方法一: 普通的 Form 提交方式, 主要使用 form.submit() 方法来将表单提交到后台,在后台是根据表单的 name 属性来获取表单中元素的值 ,代码如下:

  1  Ext.onReady(function () {
  2             var formPanel = new Ext.create({
  3                 xtype: 'form',
  4                 id: 'multiColumnForm',
  5                 collapsible: false,
  6                 frame: true,
  7                 title: '用户注册表单',
  8                 bodyPadding: '5 5 0',
  9                 width: 600,
 10                 fieldsDefaults: {
 11                     labelAlign: 'top',
 12                     msgTarget: 'side'
 13                 },
 14                 renderTo: 'regist_div',
 15                 // 提交表单
 16                 submit: function(){
 17                     //连接到服务器的url地址   
 18                     this.getEl().dom.action = 'your server url'; 
 19                     this.getEl().dom.method = 'post';
 20                     this.getEl().dom.submit();
 21                 },
 22                 items: [
 23                     {
 24                         xtype: 'textfield',
 25                         id: 'nameText',
 26                         name: 'nameText',
 27                         fieldLabel: '用户名',
 28                         allowBlank: false,
 29                         tooltip: '请输入注册用户名',
 30                         afterLabelTextTpl: required,
 31                         blankText: '请输入注册用户名',
 32                     },
 33                     {
 34                         xtype: 'textfield',
 35                         id: 'emailText',
 36                         name: 'emailText',
 37                         fieldLabel: 'Email',
 38                         allowBlank: false,
 39                         afterLabelTextTpl: required,
 40                         vtype: 'email',
 41                         tooltip: '请输入您的email 地址',
 42                         blankText: '请输入您的email 地址',
 43                     },
 44                     {
 45                         xtype: 'datefield',
 46                         id: 'birthdayText',
 47                         name: 'birthdayText',
 48                         fieldLabel: '出生日期',
 49                         tooltip: '请输入您的出生日期',
 51                     },
 52                     {
 53                         xtype: 'numberfield',
 54                         id: 'ageText',
 55                         name: 'ageText',
 56                         fieldLabel: '年龄',
 57                         value: 20,
 58                         tooltip: '请输入您的年龄',
 59                     },
 60                     {
 61                         xtype: 'textfield',
 62                         id: 'phoneText',
 63                         name: 'phoneText',
 64                         fieldLabel: '联系电话',
 65                         maxLength: 11,
 66                         tooltip: '请输入您的电话',
 67                         allowBlank: false,
 68                         afterLabelTextTpl: required,
 69                         blankText: '请输入您的电话',
 70                     },
 71                     {
 72                         xtype: 'button',
 73                         name: 'registButton',
 74                         id: 'registButton',
 75                         text: '保　存',
 76                         width: 90,
 77                         height: 30,
 78                         handler: function () {
 79                            //表单验证
 80                             var isValid = this.up('form').getForm().isValid();
 81                             if(isValid){
 82                                formPanel.form.submit();
 83                               //Ext.get('regist_div').dom.submit();
 84                            }                      
 85                  }
 86                     },
 87                     {
 88                         xtype: 'button',
 89                         name: 'RegistButton',
 90                         text: '重 置',
 91                         width: 90,
 92                         height: 30,
 93                         handler: reset
 94                     }]
 95             });
 96 
 97             function reset() {
 98                 formPanel.form.reset();
 99             }
100         });

方法二: 使用EXTJS框架中的 Ajax 方式来提交,但它不会提交整个表单,而是提交 params 参数中的数据, params 参数是个 json格式, 如果正确提交到了后台,不管后台是否成功执行,在后台返回时,都会执行 success 函数, 如果在提交进没有进入后台,就会执行failure 函数,这样一来,无法确定后台是否成功执行了,所以,在这里,要对方法进行调整,在后台成功执行时返回后,提示成功的消息,相反,如果执行失败,在返回后,提示执行失败的消息,这就要对 success 返回的参数进行判断, 在后台进行构造,如果后台执行成功,将声明一个变量,并赋值为 true, 如果后台执行失败,将返回 false, 在提交后返回提交的结果,具体代码如下:

  1   Ext.onReady(function () {
  2             var formPanel = new Ext.create({
  3                 xtype: 'form',
  4                 id: 'multiColumnForm',
  5                 collapsible: false,
  6                 frame: true,
  7                 title: '用户注册表单',
  8                 bodyPadding: '5 5 0',
  9                 width: 600,
 10                 fieldsDefaults: {
 11                     labelAlign: 'top',
 12                     msgTarget: 'side'
 13                 },
 14                 renderTo: 'regist_div',
 15                 items: [
 16                     {
 17                         xtype: 'textfield',
 18                         id: 'nameText',
 19                         name: 'nameText',
 20                         fieldLabel: '用户名',
 21                         allowBlank: false,
 22                         tooltip: '请输入注册用户名',
 23                         afterLabelTextTpl: required,
 24                         blankText: '请输入注册用户名',
 25                     },
 26                     {
 27                         xtype: 'textfield',
 28                         id: 'emailText',
 29                         name: 'emailText',
 30                         fieldLabel: 'Email',
 31                         allowBlank: false,
 32                         afterLabelTextTpl: required,
 33                         vtype: 'email',
 34                         tooltip: '请输入您的email 地址',
 35                         blankText: '请输入您的email 地址',
 36                     },
 37                     {
 38                         xtype: 'datefield',
 39                         id: 'birthdayText',
 40                         name: 'birthdayText',
 41                         fieldLabel: '出生日期',
 42                         tooltip: '请输入您的出生日期',
 43 
 44                     },
 45                     {
 46                         xtype: 'numberfield',
 47                         id: 'ageText',
 48                         name: 'ageText',
 49                         fieldLabel: '年龄',
 50                         value: 20,
 51                         tooltip: '请输入您的年龄',
 52                     },
 53                     {
 54                         xtype: 'textfield',
 55                         id: 'phoneText',
 56                         name: 'phoneText',
 57                         fieldLabel: '联系电话',
 58                         maxLength: 11,
 59                         tooltip: '请输入您的电话',
 60                         allowBlank: false,
 61                         afterLabelTextTpl: required,
 62                         blankText: '请输入您的电话',
 63                     },
 64                     {
 65                         xtype: 'button',
 66                         name: 'registButton',
 67                         id: 'registButton',
 68                         text: '保　存',
 69                         width: 90,
 70                         height: 30,
 71                         handler: function () {
 72                             var isValid=this.up('form').getForm().isValid();
 73                         console.log(isValid);
 74 
 75                         if(isValid){
 76                             var name = Ext.getCmp('nameText').getValue();
 77                             var email = Ext.getCmp('emailText').getValue();
 78                             var phone = Ext.getCmp('phoneText').getValue();
 79                             var password = Ext.getCmp('loginPassword').getValue();
 80 
 81                             Ext.Ajax.request({
 82                                 url: 'your server url',
 83                                 method: 'post',
 84                                 params: {
 85                                     'name': name,
 86                                     'email': email,
 87                                     'sex': sex,
 88                                     'phone': phone,
 89                                     'pwd': password
 90                                 },
 91                                 success: function (response, option) {
 92                                     var responseArray = Ext.util.JSON.decode(response.responseText);
 93                                     if (responseArray.success) {
 94                                         Ext.Msg.alert('提示', '提交成功');
 95                                     } else {
 96                                         Ext.Msg.alert('提示', '提交失败：'+　response.responseText);
 97                                     }
 98                                 },
 99 
100                                 failure: function(response,option){
101                                     Ext.Msg.alert('警告','数据处理发生错误：'+response.responseText)
102                                 }
103                             });
104                         }
105                         }
106                     },
107                     {
108                         xtype: 'button',
109                         name: 'RegistButton',
110                         text: '重 置',
111                         width: 90,
112                         height: 30,
113                         handler: reset
114                     }]
115             });
116 
117             function reset() {
118                 formPanel.form.reset();
119             }
120         });

注意:后台返回的 json 格式极为重要,不然前端不能正确解析

后台返回的数据格式为: '{success:true, responseText: errorInfomation, data[{id: 3124}]}

posted on 2015-10-27 22:09 wisdo 阅读(1989) 评论(0) 编辑收藏举报