ext_form表单提交
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/s3/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类似的功能
也同时可以向服务器提交。
服务器也能接收到值了
如果有更好的解决方案麻烦共享互相学习。
- 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();