这里是引用
话不多说上代码,代码中都添加了你们所需要的只是有啥不懂的可以直接留言。
我这里才用的是6.2的框架
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交</title>
<link rel="stylesheet" type="text/css"
href="extjs6/build/classic/theme-crisp/resources/theme-crisp-all.css" />
<link rel="stylesheet" type="text/css"
href="extjs6/build/classic/theme-crisp/resources/theme-crisp-all-debug.css" />
<script src="extjs6/build/ext-all.js"></script>
<script src="extjs6/build/ext-debug.js"></script>
<script src="extjs6/build/classic/locale/locale-zh_CN.js"></script>
<script src="extjs6/ext-bootstrap.js"></script>
<script type="text/javascript " src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var f=new Ext.form.FormPanel({
url:"${pageContext.request.contextPath}/StudentServlet?method=login",
method:"post",
baseParams:{extra:"attach",id:100}, //动态赋值
title:"欢迎登陆",
width:300,
height:150,
bodyStyle:"padding:2px",
labelAlign:"right", //label的对齐方式
frame:true, //为true 时可以为panel 添加背景色
items:[
new Ext.form.TextField({
name:"userName",
allowBlank:false, //不允许为空
fieldLabel:"用户名",
labelAlign:"right"
}),{
name:"password",
xtype:"textfield",
inputType:"password", //input的type 属性
fieldLabel:"密码",
labelAlign:"right",
allowBlank:false
}
],
buttons:[{
text:"确定",
handler:function(){
var userName=f.getForm().findField("userName").getValue(); //获取name 的值
var password=f.getForm().findField("password").getValue(); //获取password
Ext.Msg.alert("","用户名:"+userName+"<br>密码"+password);
f.getForm().submit({ //提交表单 并返回成功函数
success:function(f,action){
Ext.Msg.alert("成功","恭喜表单提交成功");
Ext.Msg.alert(action.result);
window.location.href="demo.jsp";
},failure:function(f,action){
Ext.Msg.alert("失败","表单提交失败");
Ext.Msg.alert("失败"+action.result);
}
})
}
},{
text:"重置",
handler:function(){
f.getForm().reset();
}
}]
})
f.render("a");
});
</script>
</head>
<body>
<table align='center' > <!--主要用于居中属性 -->
<td>
<div id="a"></div>
</td>
</table>
</body>
</html>