说明：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、结束语
我写的语言可能不优美，示例方法也可能不是很完美，但是我保证是完整的。最后希望这篇博文能够帮助你！
时间： 2024-08-05 02:12:33