Ext js form表单的提交

//定义的文本框

var GangKouCode = {
xtype: ‘textfield‘,
name: ‘PORTCODE‘,
id: ‘PORTCODE‘,
allowBlank: false,
emptyText: ‘请输入编号‘,
blankText: ‘请输入编号‘,
fieldLabel: ‘港口编号‘,
labelAlign: ‘right‘,
labelWidth: 60,
width: 150,
autoFitErrors: true,
msgTarget: ‘side‘
}
GangKouName = {
xtype: ‘textfield‘,
name: ‘PORTNAME‘,
id: ‘PORTNAME‘,
allowBlank: false,
blankText: ‘请输入名称‘,
emptyText: ‘请输入名称‘,
fieldLabel: ‘港口名称‘,
labelAlign: ‘right‘,
msgTarget: ‘side‘,
labelWidth: 60
}

//这个是个特殊的   是ComboBox
Ext.regModel(‘Country‘, { fields: [‘CNADDNAME‘, ‘ID‘] });

CountryStore = new Ext.data.JsonStore({
model: ‘Country‘,
proxy: new Ext.data.HttpProxy(
{
type: ‘ajax‘,
url: ‘/FL_Price/JiChuManage/Service.aspx?action=SelectCountry‘,
reader: new Ext.data.JsonReader({
model: ‘Country‘,
root: ‘rows‘
})
})
});
var CountryName = new Ext.form.ComboBox({
store: CountryStore,
fieldLabel: ‘所属国家‘,
labelAlign: ‘right‘,
labelWidth: 60,
queryParam: ‘name‘,
name: ‘COUNTRYNAME‘,
id: ‘COUNTRYNAME‘,
allowBlank: false,
blankText: ‘请输入国家名称‘,
emptyText: ‘请输入国家名称‘,
queryMode: ‘remote‘,
editable: true,
hideTrigger: true,
msgTarget: ‘side‘,
triggerAction: ‘all‘,
hiddenName: ‘ID‘,
displayField: ‘CNADDNAME‘,
valueField: ‘ID‘,
// pageSize: 8,
minChars: 1,
forceSelection: true,
listConfig: {
loadingText: ‘正在加载...‘,
maxHeight: 500
}
});

var HangXian = {
xtype: ‘textfield‘,
name: ‘VOYAGENAME‘,
id: ‘VOYAGENAME‘,
allowBlank: false,
blankText: ‘请选择航线‘,
fieldLabel: ‘所属航线‘,
labelAlign: ‘right‘,
msgTarget: ‘side‘,
labelWidth: 60,
listeners: {
focus: function () {
var win = showhangxianwin();
win.show();
}
}
};

//这是布局

panel = new Ext.form.Panel({
// title: ‘港口编辑‘,
region: ‘north‘,
height: 150,

layout: ‘form‘,
items: [
{ layout: ‘column‘, bodyStyle: ‘border:0‘,
items: [
{ columnWidth: .3, layout: ‘form‘, bodyStyle: ‘border:0‘, items: [GangKouCode] },
{ columnWidth: .3, layout: ‘form‘, bodyStyle: ‘border:0‘, items: [GangKouName] }
]
},
{ layout: ‘column‘, bodyStyle: ‘border:0‘,
items: [
{ columnWidth: .3, layout: ‘form‘, bodyStyle: ‘border:0‘, items: [CountryName] },
{ columnWidth: .3, layout: ‘form‘, bodyStyle: ‘border:0‘, items: [HangXian] }
]
},
{ layout: ‘column‘, bodyStyle: ‘border:0‘,
items: [
{ columnWidth: .6, layout: ‘form‘, bodyStyle: ‘border:0‘, items: [Description] }

]
}

]
});

//第一个的if 是验证

if (panel.getForm().isValid()) {

var Supplier = Ext.encode(Ext.pluck(GKCodeStore.data.items, ‘data‘));
var action = panel.getForm().findField(‘ID‘).getValue() ? "update" : "create";

//这些是获取是文本框的值
var ID = panel.getForm().findField(‘ID‘).getValue();
var VOYAGEID = panel.getForm().findField(‘VOYAGEID‘).getValue();
var VOYAGENAME = panel.getForm().findField(‘VOYAGENAME‘).getValue();
var PORTCODE = panel.getForm().findField(‘PORTCODE‘).getValue();
var PORTNAME = panel.getForm().findField(‘PORTNAME‘).getValue();
var DESCRIPTION = panel.getForm().findField(‘DESCRIPTION‘).getValue();

//获取ComboBox的值    它有两个值
var COUNTRYNAME = CountryName.getRawValue();
var COUNTRYID = CountryName.getValue();//隐藏值
var requestConfig = {
url: "GangKouList2.aspx?action=" + action,

//数据是这种格式的话  后台可以直接转为对象
params: { obj: "{ID:‘" + ID + "‘, VOYAGEID:‘" + VOYAGEID + "‘, VOYAGENAME:‘" + VOYAGENAME + "‘, PORTCODE:‘" + PORTCODE + "‘, PORTNAME:‘" + PORTNAME + "‘, DESCRIPTION:‘" + DESCRIPTION + "‘, COUNTRYNAME:‘" + COUNTRYNAME + "‘, COUNTRYID:‘" + COUNTRYID + "‘}", Supplier: Supplier },

//回调函数

callback: function (option, success, response) {
store.reload();
win1.close();
}
}

//发送异步
Ext.Ajax.request(requestConfig);
}

保存后台 ent = JsonHelper.GetObject<S_VOYAGE_PORT>(obj);

//修改 加载数据

function Update(UpdateID) {
if (UpdateID !=null) {
panel.getForm().load({
url: ‘GangKouList2.aspx?action=SelectEdit‘,
params: { UpdateID: UpdateID },
method: ‘POST‘, //请求方式
success: function (form, action) {
var Country1 = new Country({ ID: action.result.data.COUNTRYID, CNADDNAME: action.result.data.COUNTRYNAME });
CountryName.setValue(Country1);
//Ext.Msg.alert(‘提示‘, ‘载入成功‘);
}
,
failure: function (form, action) {//加载失败的处理函数
Ext.Msg.alert(‘提示‘, ‘载入失败‘);
}
});
}
}

修改后台

string data = JsonHelper.GetJsonString(S_VOYAGE_PORT.Find(ID));
string sa = "{success: true ,data:" + data + "}";

data 格式 {id:‘‘,name:‘‘,age:‘‘}

时间: 2024-08-22 00:56:55

Ext js form表单的提交的相关文章

Ext.js form 表单提交问题

var form = new Ext.form.FormPanel({ labelAlign : 'right', border : false, bodyStyle : 'background-color: transparent;padding:5px', defaults : { xtype : 'textfield', anchor : '90%' }, items : [{ name : 'rptId', hidden : true }, { name :'parId', hidden

js form 表单的提交

$("#confirm").click(function(){    var url = "${basePath}${path}saverpGoodsbase";  $("#form_item").attr("action", url);  $("#form_item").submit();   }); }; $("#form_item").attr("action"

js 防止表单重复提交

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title&

使用ajax方法实现form表单的提交

转http://www.cnblogs.com/han-1034683568/p/7199168.html 写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续

form表单的提交方式

开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单  <input type="submit"/> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>form表单提交方式</title> </head> <body>

js日期/时间比较函数,以及js校验表单后提交表单的三种方法,表单验证,以及三种结合

<pre class="html" name="code"> js日期比较(yyyy-mm-dd) function duibi(a, b) { var arr = a.split("-"); var starttime = new Date(arr[0], arr[1], arr[2]); var starttimes = starttime.getTime(); var arrs = b.split("-");

JavaScript 创建一个 form 表单并提交

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input onclick="MakeForm()" type="button" class="btn grey"

JavaWeb学习总结(十一):Session解决form表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML>

form表单submit提交内容,跟ajax异步提交form表单的区别,

因为开发一个小细节,本来是上传文件,填写文件名进行ajax提交,但是没有获取到文件的绝对地址, 所以使用了form表单提交文件,然后又觉得form表单+ajax提交联系起来比较好,不用改动太多代码. 区别: Form表单提交:一般都会进行页面跳转: Ajax异步提交:可以不进行页面跳转: Form表单提交 <body> <div id="forms”> <form id="form1" action="/users/login"