说明: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 ????????????????????else65 ????????????????????{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 ????????????????finally80 ????????????????{81 ????????????????82 ????????????????}83 ????????????84 ????????????return Json(result,JsonRequestBehavior.DenyGet);85 ????????}
4、结束语
我写的语言可能不优美,示例方法也可能不是很完美,但是我保证是完整的。最后希望这篇博文能够帮助你!
Extjs form 表单的 submit
原文地址:http://www.cnblogs.com/net064/p/8004362.html