Extjs form 表单的 submit
Posted 学习靠自己
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Extjs form 表单的 submit相关的知识，希望对你有一定的参考价值。
说明：extjs form表单的提交方式是多种多样的，本文只是介绍其中的一种方法，本文介绍的方法可能不是完美的，但是对于一般的应用应该是没有问题的。 本文包括的主要内容有：form面板设计、form字段值的获取、后台处理代码以及返回数据的获取
1、form表单设计
var panelItem = Ext.create(‘Ext.form.Panel‘, { border: false, id:‘formMain‘, layout: ‘form‘, items: [ { xtype: ‘form‘, border: false, layout: ‘column‘, id:‘formR1‘, bodyStyle: ‘padding-bottom:10px;‘, items: [ { xtype: ‘textfield‘, fieldLabel: ‘用户名‘, labelAlign: ‘right‘, columnWidth: .3, labelWidth:65, name: ‘userName‘ }, { xtype: ‘textfield‘, fieldLabel: ‘工号‘, columnWidth: .3, labelWidth: 65, labelAlign: ‘right‘, name: ‘workNum‘ }, { xtype: ‘textfield‘, fieldLabel: ‘部门‘, labelAlign: ‘right‘, columnWidth: .3, labelWidth: 65, name: ‘department‘ } ] }, { xtype: ‘form‘, border: false, id: ‘formR2‘, layout: ‘column‘, bodyStyle: ‘padding-bottom:10px;‘, items: [ { xtype: ‘textfield‘, fieldLabel: ‘电话号‘, labelAlign: ‘right‘, columnWidth: .3, labelWidth: 65, name: ‘phone‘ }, { xtype: ‘textfield‘, fieldLabel: ‘职位‘, columnWidth: .3, labelWidth: 65, labelAlign: ‘right‘, name: ‘position‘ }, { xtype: ‘textfield‘, fieldLabel: ‘微信号‘, labelAlign: ‘right‘, columnWidth: .3, labelWidth: 65, name: ‘WeiXin‘ } ] }, { xtype: ‘form‘, id: ‘formR3‘, border: false, layout: ‘column‘, items: [ { xtype: ‘combo‘, fieldLabel: ‘性别‘, //width:245, columnWidth: .3, labelAlign: ‘right‘, labelWidth: 65, editable: false, emptyText: ‘--请选择--‘, store: genderStore, queryMode: ‘local‘, displayField: ‘Name‘, valueField: ‘Value‘, name: ‘sex‘ }, { xtype: ‘textfield‘, fieldLabel: ‘通信地址‘, labelAlign: ‘right‘, columnWidth: .6, labelWidth: 65, name: ‘UserAddress‘ } ] } ], buttons: [ { text: ‘保存‘, formBind: true,//这一句代码就是把button和form表单绑定在一起 handler: function (btn) { Ext.getCmp(‘formMain‘).getForm().submit({ method: ‘POST‘, params: { //怎么获取form字段的值 userName: Ext.getCmp(‘formMain‘).getForm().findField(‘userName‘).getValue();// workNum = Ext.getCmp(‘formMain‘).getForm().findField(‘workNum‘).getValue(); department = Ext.getCmp(‘formMain‘).getForm().findField(‘department‘).getValue(); phone = Ext.getCmp(‘formMain‘).getForm().findField(‘phone‘).getValue(); position = Ext.getCmp(‘formMain‘).getForm().findField(‘position‘).getValue(); WeiXin = Ext.getCmp(‘formMain‘).getForm().findField(‘WeiXin‘).getValue(); sex = Ext.getCmp(‘formMain‘).getForm().findField(‘sex‘).getValue(); UserAddress = Ext.getCmp(‘formMain‘).getForm().findField(‘UserAddress‘).getValue(); }, url: ‘Home/HandlerRoleAdd‘, waitMsg: ‘请稍等,正在添加‘, success: function (form, action) { if(action.result.success) { Ext.getCmp(‘formMain‘).getForm().reset();//form表单重置 Ext.MessageBox.alert(‘提示‘, ‘添加成功!‘); //可以根据返回结果，做进一步的处理 // btn.ownerCt.close();这一句的作用是，如果把上面定义的form对象作为某个窗体的item，就是关闭该窗体 } else { Ext.MessageBox.alert(‘提示‘, action.result.msg); } }, failure: function (form, action) { Ext.MessageBox.alert(‘提示‘, action.result.msg); } }); } }, { text: ‘重置‘, handler: function () { Ext.getCmp(‘formMain‘).getForm().reset();//form表单重置 } }] });
2、form表单中combox控件所需的store
var genderStore = Ext.create("Ext.data.Store", {
fields: ["Name", "Value"],
data: [
{ Name: "男", Value: 1 },
{ Name: "女", Value: 2 }
]
});
3、后台代码及返回值结构等
后台是asp.net mvc c#语言开发
1 public ActionResult HandlerRoleAdd() 2 { 3 try 4 { 5 //获取前台传过来的参数 6 string userName = string.Empty; 7 if (Request["userName"] != null) 8 { 9 userName = Request["userName"].ToString(); 10 } 11 string workNum = string.Empty; 12 if (Request["workNum"] != null) 13 { 14 workNum = Request["workNum"].ToString(); 15 } 16 string department = string.Empty; 17 if (Request["department"] != null) 18 { 19 department = Request["department"].ToString(); 20 } 21 22 string phone = string.Empty; 23 if (Request["phone"] != null) 24 { 25 phone = Request["phone"].ToString(); 26 } 27 28 string position = string.Empty; 29 if (Request["position"] != null) 30 { 31 position = Request["position"].ToString(); 32 } 33 34 string WeiXin = string.Empty; 35 if (Request["WeiXin"] != null) 36 { 37 WeiXin = Request["WeiXin"].ToString(); 38 } 39 40 string sex = string.Empty; 41 if (Request["sex"] != null) 42 { 43 sex = Request["sex"].ToString(); 44 } 45 46 47 string UserAddress = string.Empty; 48 if (Request["UserAddress"] != null) 49 { 50 UserAddress = Request["UserAddress"].ToString(); 51 } 52 53 54 string str =string.empty; 55 // 56 //具体业务逻辑 57 // 58 59 if (string.IsNullOrEmpty(str)) 60 { 61 result.success = false; 62 result.msg = "失败"; 63 } 64 else 65 { 66 result.success = true; 67 result.msg = "成功"; 68 69 } 70 71 } 72 catch(Exception ex) 73 { 74 75 result.success = false; 76 result.msg = ex.Message; 77 78 } 79 finally 80 { 81 82 } 83 84 return Json(result,JsonRequestBehavior.DenyGet); 85 }
4、结束语
我写的语言可能不优美，示例方法也可能不是很完美，但是我保证是完整的。最后希望这篇博文能够帮助你！
以上是关于Extjs form 表单的 submit的主要内容，如果未能解决你的问题，请参考以下文章