ext_form表单提交
- 格式：doc
- 大小：59.00 KB
- 文档页数：4
文档推荐
-
表单_基础知识页数:10
-
html表单登陆模板页数:6
-
HTML制作表单页数:29
-
Form 表单页数:50
-
ext_form表单提交页数:4
-
表单multipart(form-data)页数:31
下载文档原格式
合集下载
ext的三种提交方式
1.form提交：if (newFs.form.isValid()) {newFs.form.doAction('submit', {url : 'agentServ!save.action',waitMsg : '保存中...',method : 'post',params : '',success : function(form, action) {Ext.Msg.alert('操作', action.result.actionInfo);newFs.getForm().reset();store.reload();},failure : function(form, action) {Ext.Msg.alert('保存失败!', '原因:'+ action.result.actionInfo);store.reload();}});}newFs.form.isValid()用来对form进行校验通过返回true，未通过返回false，例如form有非空属性的控件，如此空间不填写值就不能通过校验。
waitMsg：提交时等待条的信息，不写此属性则不会有等待。
params：提交的参数，可以写成'id=’id或{id:id}success：提交后用一个名为success布尔类型变量并将其Json化后，如此值为true则执行success中的函数。
否则执行failure的函数。
action.result：用于取得提交后后台返回的Json化的变量2.Ajax提交：Ext.Ajax.request({url: 'subBusitype!disableBulk.action',method:'post',failure:function(response,opt){alert(response.responseText)},success: function(response, options) {var responseArray = Ext.util.JSON.decode(response.responseText);if(responseArray.success==true){store.load();Ext.Msg.alert('信息','废除信息成功');}else if(responseArray.success=='false'){Ext.Msg.alert('失败',response.responseText);}},params:{ids:ids}})Ext.util.JSON.decode(response.responseText)：用于取得提交后后台返回的Json化的变量以上两种方法都为异步提交。
form表单提交的几种方法
form表单提交的⼏种⽅法⼀：submit 提交表单，但是此时有⼀个提交按钮的样式，需要进⾏⼀些修改<form action="" method="" id="forms"><input type="text" name="username" value="" /><input type="password" name="pwd" value="" /><input type="submit" value="提交"/></form> ⼆：利⽤js来提交<!--HTML--><form action="" method="" id="test_form"><input type="text" name="username" value="" /><input type="password" name="pwd" value="" /><button type="button" onclick='doSubmitForm()'>提交<button/></form><script>var form = document.getElementById('test_form');//再次修改input内容form.submit();</script> 三 这种⽅法有个缺点就是，打乱正常的表单提交程序，通常⽤户输⼊完成后点击回车键就可以提交，但是这个⽅法实现不了，所以，使⽤下⾯的⽅法便可以解决这个问题,，通过form⾃⾝的onsubmit⽅法，来触发提交，然后进⾏input的修改：<!--HTML--><form id='test_form' action='' method='' omsubmit='return checkForm()'><input type='text' name='username' value=''/><input type='password' name='pwd' value =''/><button type='submit'>提交<button/><form/><script>function checkForm(){var form = document.getElementById('test_form');//可在此修改input//进⾏下⼀步return true;}<script/> 注意，checkForm()⽅法中，return true时，表单才会正常提交，为false时，浏览器将不会提交，通常是⽤户的密码输⼊错误时，终⽌提交。
EXTJS-表单-1
HtmlEditor
• • • • • • • • • • • • var field = new Ext.form.HtmlEditor({ fieldLabel: '在线编辑器', enableAlignments: true, enableColors: true, enableFont: true, enableFontSize: true, enableFormat: true, enableLinks: true, enableLists: true, enableSourceEdit: true, fontFamilies: ['宋体', '黑体'] });
• • • •
allowBlank：输入是否允许为空 maxLength: 最大长度 minLength: 最小长度 vtype: 是Ext提供的一套默认的校验方案，一共 Ext 有四种方案：
Html原始的提交方式
• buttons: [{ • text: '按钮', • handler: function() { • form.getForm().getEl().dom.action = “result.jsp"; • form.getForm().getEl().dom.submit(); • } • }]
TextArea
• var field = new Ext.form.TextArea({ • width: 200, • grow: true, • preventScrollbars: true, • fieldLabel: 'empty', • allowBlank: false, • emptyText: '空', • maxLength: 50, • minLength: 10, • value: '第一行\n第二行\n第三行\n第四行' • });
ExtJS—表单与输入控件
ExtJS—表单与输入控件表单在EXT中非常受欢迎，初看这些输入控件，好像只是修改了CSS样式而已，但是如果用Firebug查看一下DOM，似乎确实只有CSS发生了变化，隐藏在漂亮界面下的依然是原来的input控件，如果你想使用EXT提供的一些绚丽的功能，建议尝试EXT的表单(Form)和对应的输入控件。
本文就是简单介绍表单与输入控件的使用方法。
一、创建一个简单的表单1、具体配置信息参考上篇文章2、创建简单表单的实现代码如下所示：view plaincopy to clipboardprint?1.<mce:script type="text/javascript"><!--2.Ext.onReady(function(){3.var form=new Ext.form.FormPanel({4.defaultType:'textfield',belAlign:'right',6.title:'form',belWidth:50,8.frame:true,9.width:220,10.items:[{11.fieldLabel:' 文本框'12.}],13.buttons:[{14.text:'按钮'15.}]16.});17.form.render("div1");18.});19.20.// --></mce:script>3、注意HTML中无需定义太多东西，只需要定义个div id='div1'就可以实现，初始配置显然变得更紧凑，利用items和buttons指定包含的控件和按钮。
具体实现效果如图1所示。
图1 简单的表单二、FormPanel和BasicForm详解如上面的实例所示，我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.For mPanel 的最大好处就是利于布局，Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分，同时也可以利用items指定Ext.form.FormPanel内部的子组件。
[转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的a。。。
![[转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的a。。。](https://img.taocdn.com/s1/m/2521bf00cd7931b765ce0508763231126edb7738.png)
[转]ExtJs⼊门之filefield：⽂件上传的配置+结合Ajax完美实现⽂件上传的a。
作⽂⼀个ExtJs的⼊门汉⼦，学习起来的确是⽐较费劲的事情，不过如今在这样⼀个⽹络资源如此丰富的时代，依然不是那么难了的。
基本上都是Copy过来加以部分改造即可实现⾃⼰想要的功能，加之如今的第三⽅开发者也⼤发慈悲地写出了API的帮助⽂档以及⽰例⽂档。
关于ExtJs内的⽂件上传，将从以下⼏个⽅⾯进⾏展开讲解：⼀、ExtJs⽂件上传版⾯的布局以及配置因为ExtJs的⽂件上传组件filefield是基于form表单提交数据的，所以我们需要创建Ext.form.Panel，页⾯布局及其配置代码如下所⽰：001.<html xmlns="">002.<head runat="server">003.<title>ExtJs的⽂件上传</title>004.<!-- ExtJS -->005.<link rel="stylesheet"type="text/css"href="/css/ext-all.css"/>006.<script type="text/javascript"src="/js/ext-all.js"></script>007.<!-- Shared -->008.<link rel="stylesheet"type="text/css"href="/css/example.css"/>009.<script type="text/javascript"language="javascript">010.Ext.require([011.'Ext.form.field.File',012.'Ext.form.Panel',013.'Ext.window.MessageBox'014.]);015.016.Ext.onReady(function() {017.//定义⼀个消息提⽰⽅法018.var msg = function(title, msg) {019.Ext.Msg.show({020.title: title,021.msg: msg,022.minWidth: 200,023.modal: true,024.icon: ,025.buttons: Ext.Msg.OK026.});027.};028.//创建form表单029.Ext.create('Ext.form.Panel', {030.renderTo: 'divUpload',//form表单的承载对象031.width: 600, //表单宽度032.frame: true,033.title: '图⽚上传',//表单名称034.bodyPadding: '10 10 0', //表单内项⽬距离边框的值035.//配置默认属性036.defaults: {037.anchor: '90%',038.allowBlank: false,039.msgTarget: 'side',belWidth: 100041.},042.//表单内的项⽬配置043.items: [{044.xtype: 'textfield',045.fieldLabel: '图⽚说明',: 'picDesc'//这个是⽂本框的name值，post表单数据的时候，⽤于Request["picDesc"] 获取数据之⽤047.}, {048.xtype: 'filefield',049.id: 'fileUpload',050.emptyText: '请选择⼀个图⽚⽂件',051.fieldLabel: '图⽚路径',: 'fileUpload',053.buttonText: '浏览',054.buttonConfig: {055.iconCls: 'upload-icon'056.},057.//添加事件058.listeners: {059.//装载的时候添加监听事件060."render": function() {061.//这⾥尤其要注意的是使⽤Ext.get('upload'),⽽不是Ext.getCmp('upload'),否则不起效果，若使⽤后者，则只有当⽂本框的内容改变的时候，才会触发change 事件062.Ext.get('fileUpload').on("change", function() {063.debugger064.var uploadFileName = Ext.getCmp('fileUpload').getValue();065.//只允许上传jpg|JPG⽂件066.if(uploadFileName.substring(stIndexOf(".") + 1).toLowerCase() != "jpg"|| uploadFileName.substring(stIndexOf(".") + 1).toLowerCase() != "JPG") {067.msg('Error', '只允许上传pg|JPG⽂件!');068.}069.})070.}071.}072.}],073.buttons: [{074.text: '上传',075.handler: function() {076.var form = this.up('form').getForm();077.//验证表单078.if(form.isValid()) {079.//获取所选择⽂件的名称080.var epath = form.findField("fileUpload").getValue();081.//只允许上传jpg|JPG件082.if(epath.substring(stIndexOf(".") + 1).toLowerCase() == "jpg"|| epath.substring(stIndexOf(".") + 1).toLowerCase() == "JPG") {083.form.submit({084.url: '/Pic/Upload_Ajax.aspx',085.waitMsg: '图⽚正在上传，请耐⼼等待....',086.success: function(fp, o) {087.msg('图⽚上传成功', o.message);088.},089.failure: function(fp, o) {090.msg("错误提⽰", o.message);091.}092.});093.} else{094.msg('错误提⽰', '只允许上传jpg|JPG⽂件!');095.}096.}097.}098.}, {099.text: '取消',100.handler: function() {101.this.up('form').getForm().reset();102.}103.}]104.});105.106.});107.</script>108.</head>109.<body>110.<form id="form1"runat="server">111.<div id="divUpload">112.</div>113.</form>114.</body>115.</html>⼆、编写Upload_Ajax.aspx的相关代码获取表单数据核⼼代码如下所⽰：01.protected void Page_Load(object sender, EventArgs e)02.{03.HttpPostedFile file = Request.Files["fileUpload"];04.//图⽚描述05.string FileDesc = Request["picDesc"];06.07.if(file != null)08.{09.//上传图⽚路径10.string PicSavePath = string.Format("/images/upload/{0}", file.FileName);11.try12.{13.file.SaveAs(MapPath(PicSavePath));14.}15.catch(Exception eg)16.{17.Response.Write("{success:false,flag:0,message:'"+eg.ToString()+"!'}");18.}19.Response.Write("{success:true,flag:0,message:'⽂件"+file.FileName+"上传成功!'}");20.}21.else22.{23.Response.Write("{success:false,flag:0,message:'参数配置错误!'}");24.}25.Response.End();26.}三、运⾏效果图⽂件上传页⾯配置效果图图1：⽂件上传页⾯配置效果图⽂件上传过程中的提⽰效果图图2：⽂件上传过程中的提⽰效果图。
Ext属性详细信息
Ext属性详细信息Ext.window属性详细信息Ext.Window扩展⾃Ext.Panel，其xtype值为window。
1、主要配置项closable：是否允许关闭窗⼝，默认为true。
closeAction：关闭窗⼝的动作，包括以下两种：close：从DOM删除窗⼝，销毁窗⼝及其所属组件，窗⼝不再可⽤，重新显⽰需要调⽤show⽅法。
此为默认值。
hide：通过设置可见性隐藏窗⼝，窗⼝还可⽤，调⽤show⽅法后重新显⽰。
constrain：是否约束窗⼝只能在容器内移动，默认为false。
窗⼝默认渲染到document.body。
constrainHeader：是否约束窗⼝头部只能在容器内移动，默认为false。
draggable：是否可拖曳，默认为true。
resizable：是否可改变窗⼝的⼤⼩，默认为true。
modal：是否为模式窗⼝，默认为false。
maximizable：是否可最⼤化窗⼝，默认为false。
maximized：是否在初始化时最⼤化显⽰窗⼝，默认为false。
x：窗⼝的X坐标值。
y：窗⼝的Y坐标值。
manager：WindowGroup的引⽤。
expandOnShow：是否在窗⼝显⽰时展开它，默认为true。
当取值为false时，collapsed取值为true时，窗⼝初始显⽰时收缩。
minimizable：是否可最⼩化窗⼝，默认为false。
需要⾃定义最⼩化⾏为。
defaultButton：当窗⼝获得焦点时，默认获得焦点的按钮。
plain：主体背景是否透明，默认为false。
2、主要⽅法：show( [String/Element animateTarget], [Function callback], [Object scope] )：显⽰窗⼝。
hide( [String/Element animateTarget], [Function callback], [Object scope] )：隐藏窗⼝。
表单提交的多种方法
表单提交的多种⽅法表单提交共有四个⽅法表单提交⽅式⼀：直接利⽤form表单提交html页⾯代码：<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Insert title here</title></head><body><form action="http://localhost:8080/user" method="post">username:<input type="text" name="username" /><br>password:<input type="password" name="password" /> <br><input type="submit" value="登录"></form></body></html>controller页⾯代码：package com.help.demo.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.ResponseBody;@Controllerpublic class UserController {@PostMapping("/user")@ResponseBodypublic String add(String username,String password){System.out.println("返回值是》》"+username+"---->"+password);String str = "返回值是"+username+password;return str;}}》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》表单提交⽅式⼆：使⽤ajax提交html页⾯代码：<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Insert title here</title></head><body><!-- --><form method="post" onsubmit="return false" action="##" id="formtest">username:<input type="text" name="username" /><br>password:<input type="password" name="password" /> <br><input type="button" value="登录" onclick="login()"></form><script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/jquery.easyui.min.js"></script><script type="text/javascript" src="/js/extJquery.js"></script><script type="text/javascript" src="/js/extEasyUI.js"></script><script type="text/javascript">function login() {$.ajax({//⼏个参数需要注意⼀下type: "POST",//⽅法类型dataType: "text",//预期服务器返回的数据类型如果是对象返回的是json 如果是字符串这⾥⼀定要定义text 之前我就是定义json 结果字符串的返回⼀直到额error中去/*dataType:要求为String类型的参数，预期服务器返回的数据类型。
ExtForm表单元素如果设置成disable的时候就无法向服务器提交解决方案
ExtForm表单元素如果设置成disable的时候就无法向服务器
提交解决方案
当一个form表单元素设置成disable的时候。
该控件的值就不能提交到服务器了。
当你用Request.Form[控件名称]就无法获取该值了
解决方案：
不要设置成disable,直接设置成readOnly就行了
控件对象.el.dom.readOnly=true就只读了。
但是颜色还没变啊。
我要想颜色变成disable那种怎么办呢。
其实Ext它已经有个disable默认样式
控件对象.addClass("x-item-disabled");
就这样两行代码就完全模拟了disable类似的功能
也同时可以向服务器提交。
服务器也能接收到值了
如果有更好的解决方案麻烦共享互相学习。
form表单提交的方法
form表单提交的方法在现代Web开发中，form表单是一种常用的数据提交方式。
当用户需要向服务器提交数据时，可以通过form表单来实现。
本文将介绍form表单提交的方法及其相关内容。
一、什么是form表单form表单是HTML中的一个标签，它用于收集用户输入的数据，并将这些数据发送到服务器。
通常，form表单包含一系列的输入字段（如文本框、复选框、单选框等），以及一个提交按钮。
用户填写完表单后，可以点击提交按钮将数据发送给服务器。
二、form表单的属性form表单有多个属性，用于定义表单的行为和样式。
其中一些常用的属性包括：1. action：指定表单数据提交到的URL地址。
可以是相对路径或绝对路径，但不应包含http地址。
2. method：指定表单提交的HTTP方法，常见的有GET和POST两种。
3. enctype：指定表单数据的编码类型，常见的有application/x-www-form-urlencoded和multipart/form-data。
4. target：指定服务器返回的响应数据将在何处展示，常见的有_blank（在新窗口打开）和_self（在当前窗口打开）。
三、form表单的提交方式form表单有两种提交方式：GET和POST。
1. GET方式提交GET方式是最常见的表单提交方式，它将表单数据附加在URL的查询字符串中，并通过HTTP的GET方法发送给服务器。
GET方式提交的特点是参数以键值对的形式出现在URL中，适合用于查询操作。
例如，用户在一个搜索表单中输入关键字后，点击提交按钮，浏览器将会将关键字以GET方式提交给服务器，服务器根据关键字进行搜索并返回结果。
2. POST方式提交POST方式将表单数据放在HTTP请求的消息体中，并通过HTTP的POST方法发送给服务器。
POST方式提交的特点是参数不会出现在URL中，适合用于提交操作。
例如，当用户在注册表单中输入用户名和密码后，点击提交按钮，浏览器将会将用户名和密码以POST方式提交给服务器，服务器将保存用户信息并返回注册成功的页面。
Form表单,4种常见的表单提交方式
首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服 务端语言都对这种方式有很好的支持。例如 PHP 中，$_POST['title'] 可以获取到 title 的值，$_POST['sub'] 可以得到 sub 数组。
协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后 发送的 HTTP 请求满足上面的格式就可以。
但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据 请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。
6
7 title
8 ------WebKitFormBoundaryrGKCBY7qhFd3TrwA 910CCoonntteenntt--DTyisppeo:siimtioang:ef/oprnmg-data; name="file"; filename="chrome.png"
11PNG ... content of chrome.png ... 12------WebKitFormBoundaryrGKCBY7qhFd3TrwA-13
所以说到 POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分
协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后 发送的 HTTP 请求满足上面的格式就可以。
但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据 请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。
6
7 title
8 ------WebKitFormBoundaryrGKCBY7qhFd3TrwA 910CCoonntteenntt--DTyisppeo:siimtioang:ef/oprnmg-data; name="file"; filename="chrome.png"
11PNG ... content of chrome.png ... 12------WebKitFormBoundaryrGKCBY7qhFd3TrwA-13
所以说到 POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
}
})
}
3、Ext的Ajax提交
Ext的ajax提交：
handler:function() {
Ext.Ajax.request({
url:'common/ajax/login.jsp',
method:'POST',
params:{
'username':Ext.get("username").dom.value
vartext = eval("("+form.responseText+")");
alert('--------------2='+ text.msg);
},
failure:function() {
alert('--------------1');
}
})
}
//第二种方式
/*
handler:function() {
//document.location='index.html';
Ext.Msg.alert('成功', action.result.msg);
} else {
Ext.Msg.alert('登陆错误', action.result.msg);
}
},
failure:function(form, action) {
},
提交按钮：
handler:function() {
loginForm.form.submit();
}
2、默认提交方式(Ajax)
默认的提交方式：
handler:function() {
loginForm.form.doAction('submit', {
url:'/ext/common/ajax/login.jsp',
loginForm.form.doAction('submit', {
url:'/ext/common/ajax/login.jsp',
method:'POST',
params:'',
success:function(form, action) {
//alert(action.result);
if (action.result.msg == 'ok') {
response.setContentType("பைடு நூலகம்ext/html; charset=UTF-8");
String username = request.getParameter("username");
System.out.println("---->>>>>"+ username);
out.print("{success:true, msg:'ok'}");
method:'POST',
params:'',
success:function(form, action) {
//alert(action.result);
if(action.result.msg =='ok') {
//document.location='index.html';
Ext.Msg.alert('成功', action.result.msg);
//第三种方式
handler:function() {
Ext.Ajax.request({
url:'common/ajax/login.jsp',
method:'POST',
params:{
'username':Ext.get("username").dom.value
},
success:function(form, action) {
border:false,
formId:'form1',
name:'form1',
//onSubmit:Ext.emptyFn,
//submit: function(){
//this.getEl().dom.action = 'common/ajax/login.jsp'; //连接到服务器的url地址
}
}]
});
varwin =newExt.Window({
title:'window',
width:400,
frame:true,
border:false,
modal:true,
resizable:false,
items:loginForm
});
win.show();
});
1、正常form提交
这种方式需要在FormPanel对象中增加属性
fieldLabel:'用户名'
},{
name:'password',
inputType:'password',
fieldLabel:'密码'
},{
name:'code',
fieldLabel:'验证码',
anchor:'50%'
}],
buttons:[{
text:'登录',
type:'submit',
},
success:function(form, action) {
vartext = eval("("+form.responseText+")");
alert('--------------2='+ text.msg);
},
failure:function() {
alert('--------------1');
//this.getEl().dom.submit();
//alert(this.getEl().dom.elements.length);
//},
defaults:{
xtype:'textfield',
anchor:'90%'
},
items:[{
name:'username',
id:'username',
}else{
Ext.Msg.alert('登陆错误', action.result.msg);
}
},
failure:function(form, action) {
Ext.Msg.alert('警告','用户名或密码错误！');
}
})
}
服务端代码：
request.setCharacterEncoding("UTF-8");
onSubmit:Ext.emptyFn,
submit:function(){
this.getEl().dom.action ='common/ajax/login.jsp';//连接到服务器的url地址
this.getEl().dom.submit();
alert(this.getEl().dom.elements.length);
ExtJs表单提交
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL ='js/ext3/resources/s.gif';
Ext.onReady(function(){
varloginForm =newExt.FormPanel({
frame:true,
method:'POST',
Ext.Msg.alert('警告', '用户名或密码错误！');
}
})
}*/
//第一种方式
//handler:function() {
//loginForm.form.submit();
//}
},{
text:'取消',
handler:function() {
loginForm.form.reset();
})
}
3、Ext的Ajax提交
Ext的ajax提交：
handler:function() {
Ext.Ajax.request({
url:'common/ajax/login.jsp',
method:'POST',
params:{
'username':Ext.get("username").dom.value
vartext = eval("("+form.responseText+")");
alert('--------------2='+ text.msg);
},
failure:function() {
alert('--------------1');
}
})
}
//第二种方式
/*
handler:function() {
//document.location='index.html';
Ext.Msg.alert('成功', action.result.msg);
} else {
Ext.Msg.alert('登陆错误', action.result.msg);
}
},
failure:function(form, action) {
},
提交按钮：
handler:function() {
loginForm.form.submit();
}
2、默认提交方式(Ajax)
默认的提交方式：
handler:function() {
loginForm.form.doAction('submit', {
url:'/ext/common/ajax/login.jsp',
loginForm.form.doAction('submit', {
url:'/ext/common/ajax/login.jsp',
method:'POST',
params:'',
success:function(form, action) {
//alert(action.result);
if (action.result.msg == 'ok') {
response.setContentType("பைடு நூலகம்ext/html; charset=UTF-8");
String username = request.getParameter("username");
System.out.println("---->>>>>"+ username);
out.print("{success:true, msg:'ok'}");
method:'POST',
params:'',
success:function(form, action) {
//alert(action.result);
if(action.result.msg =='ok') {
//document.location='index.html';
Ext.Msg.alert('成功', action.result.msg);
//第三种方式
handler:function() {
Ext.Ajax.request({
url:'common/ajax/login.jsp',
method:'POST',
params:{
'username':Ext.get("username").dom.value
},
success:function(form, action) {
border:false,
formId:'form1',
name:'form1',
//onSubmit:Ext.emptyFn,
//submit: function(){
//this.getEl().dom.action = 'common/ajax/login.jsp'; //连接到服务器的url地址
}
}]
});
varwin =newExt.Window({
title:'window',
width:400,
frame:true,
border:false,
modal:true,
resizable:false,
items:loginForm
});
win.show();
});
1、正常form提交
这种方式需要在FormPanel对象中增加属性
fieldLabel:'用户名'
},{
name:'password',
inputType:'password',
fieldLabel:'密码'
},{
name:'code',
fieldLabel:'验证码',
anchor:'50%'
}],
buttons:[{
text:'登录',
type:'submit',
},
success:function(form, action) {
vartext = eval("("+form.responseText+")");
alert('--------------2='+ text.msg);
},
failure:function() {
alert('--------------1');
//this.getEl().dom.submit();
//alert(this.getEl().dom.elements.length);
//},
defaults:{
xtype:'textfield',
anchor:'90%'
},
items:[{
name:'username',
id:'username',
}else{
Ext.Msg.alert('登陆错误', action.result.msg);
}
},
failure:function(form, action) {
Ext.Msg.alert('警告','用户名或密码错误！');
}
})
}
服务端代码：
request.setCharacterEncoding("UTF-8");
onSubmit:Ext.emptyFn,
submit:function(){
this.getEl().dom.action ='common/ajax/login.jsp';//连接到服务器的url地址
this.getEl().dom.submit();
alert(this.getEl().dom.elements.length);
ExtJs表单提交
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL ='js/ext3/resources/s.gif';
Ext.onReady(function(){
varloginForm =newExt.FormPanel({
frame:true,
method:'POST',
Ext.Msg.alert('警告', '用户名或密码错误！');
}
})
}*/
//第一种方式
//handler:function() {
//loginForm.form.submit();
//}
},{
text:'取消',
handler:function() {
loginForm.form.reset();