一个简单的Extjs3.0表单提交实例

最新推荐文章于 2014-11-06 12:59:44 发布

原创最新推荐文章于 2014-11-06 12:59:44 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #function #email #stylesheet #string #action

ExtJS 专栏收录该内容

0 篇文章

订阅专栏

博客展示了ExtJS表单页面的实现，包含jsp展现页面代码、js代码和后台JSP代码。jsp页面引入相关样式和脚本，js代码创建表单面板并处理提交逻辑，后台JSP接收参数并返回结果，实现了一个简单的表单数据提交与处理功能。

效果图：

代码界面效果图

jsp展现页面代码：

<%@page contentType="text/html;charset=GBK" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">

js代码：

Ext.onReady(onReadyFn); function onReadyFn(){ Ext.QuickTips.init(); // turn on validation errors beside the field globally Ext.form.Field.prototype.msgTarget = 'side'; var simple = new Ext.FormPanel({ labelWidth: 75, // label settings here cascade unless overridden url:'TestForm1Save.jsp', frame:true, title: 'Simple Form', bodyStyle:'padding:5px 5px 0', width: 350, defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: '姓名', name: 'Name1', allowBlank: false, blankText: "姓名不能为空", labelSeparator:'：' },{ fieldLabel: '密码', name: 'Password', allowBlank: false, inputType: "password", blankText: "密码不能为空", labelSeparator:'：' },new Ext.form.Hidden({ fieldLabel: 'TestHidden', name: 'TestHidden' }),{ fieldLabel: 'Email', name: 'Email', vtype:'email' }, new Ext.form.TimeField({ fieldLabel: 'Time', name: 'Time', minValue: '8:00am', maxValue: '6:00pm' }) ], buttons: [{ text: 'Save', handler:function(){ if(!check()){ return false; } if(simple.form.isValid()){ showProcess(); //自定义，在common/extjs-assis/ext-self.js下 //获取控件的值 //alert("您录入的是：" + simple.getForm().findField('Name1').getValue() + ", " + simple.getForm().findField('Email').getValue()); simple.getForm().findField('TestHidden').setRawValue("Hidden Field Test Value"); this.setDisabled(true); simple.getForm().submit({ url:'TestForm1Save.jsp', method:'post', params:'', success:function(form,action) { Ext.MessageBox.alert('提示',"操作成功，" + action.result.msg); }, failure:function(form,action){ Ext.MessageBox.alert('提示','操作失败，' + action.result); } }); this.setDisabled(false); } else{ Ext.MessageBox.alert("提示", "请正确录入数据。"); return false; } } },{ text: 'Cancel', handler:function(){ simple.form.reset(); } }] }); simple.render("FormDiv"); } function check(){ //alert("校验函数"); return true; }

后台JSP代码：

<%@page contentType="text/html;charset=GBK" %> <% String tName = request.getParameter("Name1"); String tTestHidden = request.getParameter("TestHidden"); String tEmail = request.getParameter("Email"); //String rs = "{failure:true,msg:/'你录入的是：姓名：" + tName + ", TestHidden：" + tTestHidden + ", Email：" + tEmail + "/'}"; String rs = "{success:true,msg:/'你录入的是：姓名：" + tName + ", TestHidden：" + tTestHidden + ", Email：" + tEmail + "/'}"; System.out.println(rs); out.write(rs); %>