Extjs form 表单的 submit
2024-08-24 06:40:55
说明：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: .,
labelWidth:,
name: 'userName'
}, {
xtype: 'textfield',
fieldLabel: '工号',
columnWidth: .,
labelWidth: ,
labelAlign: 'right',
name: 'workNum'
}, {
xtype: 'textfield',
fieldLabel: '部门',
labelAlign: 'right',
columnWidth: .,
labelWidth: ,
name: 'department'
}
]
},
{
xtype: 'form',
border: false,
id: 'formR2',
layout: 'column',
bodyStyle: 'padding-bottom:10px;',
items: [
{
xtype: 'textfield',
fieldLabel: '电话号',
labelAlign: 'right',
columnWidth: .,
labelWidth: ,
name: 'phone'
}, {
xtype: 'textfield',
fieldLabel: '职位',
columnWidth: .,
labelWidth: ,
labelAlign: 'right',
name: 'position'
}, {
xtype: 'textfield',
fieldLabel: '微信号',
labelAlign: 'right',
columnWidth: .,
labelWidth: ,
name: 'WeiXin'
}
]
}, {
xtype: 'form',
id: 'formR3',
border: false,
layout: 'column',
items: [
{
xtype: 'combo',
fieldLabel: '性别',
//width:245,
columnWidth: .,
labelAlign: 'right',
labelWidth: ,
editable: false,
emptyText: '--请选择--',
store: genderStore,
queryMode: 'local',
displayField: 'Name',
valueField: 'Value',
name: 'sex'
}, {
xtype: 'textfield',
fieldLabel: '通信地址',
labelAlign: 'right',
columnWidth: .,
labelWidth: ,
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#语言开发
public ActionResult HandlerRoleAdd()
{
try
{
//获取前台传过来的参数
string userName = string.Empty;
if (Request["userName"] != null)
{
userName = Request["userName"].ToString();
}
string workNum = string.Empty;
if (Request["workNum"] != null)
{
workNum = Request["workNum"].ToString();
}
string department = string.Empty;
if (Request["department"] != null)
{
department = Request["department"].ToString();
} string phone = string.Empty;
if (Request["phone"] != null)
{
phone = Request["phone"].ToString();
} string position = string.Empty;
if (Request["position"] != null)
{
position = Request["position"].ToString();
} string WeiXin = string.Empty;
if (Request["WeiXin"] != null)
{
WeiXin = Request["WeiXin"].ToString();
} string sex = string.Empty;
if (Request["sex"] != null)
{
sex = Request["sex"].ToString();
} string UserAddress = string.Empty;
if (Request["UserAddress"] != null)
{
UserAddress = Request["UserAddress"].ToString();
} string str =string.empty;
//
//具体业务逻辑
// if (string.IsNullOrEmpty(str))
{
result.success = false;
result.msg = "失败";
}
else
{
result.success = true;
result.msg = "成功"; } }
catch(Exception ex)
{ result.success = false;
result.msg = ex.Message; }
finally
{ } return Json(result,JsonRequestBehavior.DenyGet);
}
4、结束语
我写的语言可能不优美，示例方法也可能不是很完美，但是我保证是完整的。最后希望这篇博文能够帮助你！
最新文章
- [codeforces 241]A. Old Peykan
- 最新的windows xp sp3序列号(绝对可通过正版验证)
- 吐槽下近期的4G手机:
- 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境：2.搭建环境-2.3配置共享磁盘
- 在Toast里面显示图片
- python装饰器总结
- Win7下的DragEnter、DragDrop事件不触发的解决方案
- wcf双工通讯遇到的问题
- android 监听app进入后台以及从后台进入前台
- Hadoop处理HDF文件
- 阅读 LdrInitializeThunk
- C# 开发技巧]如何防止程序多次运行 线程 进程
- css简单了解
- GPUImage库的使用
- linux防火墙之 ufw
- 远程调试Eclipse插件的设置
- OCR技术浅析-tesserOCR（3）
- Collections.sort排序
- spring的compentScan注解扫描类机制
- PDF编辑方法，PDF如何去除数字签名