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

效果图：

 

jsp展现页面代码：

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

  <link rel="stylesheet" type="text/css" href="../common/extjs/resources/css/ext-all.css"/>
  <script type="text/javascript" src="../common/extjs/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../common/extjs/ext-all.js"></script> 
  <script type="text/javascript" src="../common/extjs_assis/ext-self.js"></script>
 
  <SCRIPT src="../common/easyQuery/EasyQuery.js"></SCRIPT>
  <SCRIPT src="TestForm1.js"></SCRIPT>
<title>TestForm</title>
</head>

<body>
  <form action="TestForm1Save.jsp" method=post name=fm>
    <br>
    <div id="FormDiv" style="text-align: center; left: 30%; top:30%; position: absolute"><div>
  </form>
</body>
</html>

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); %>