ExtJs学习笔记——登录窗口的使用

漏气的可乐

于 2019-08-21 18:50:38 发布

阅读量180

点赞数

分类专栏： Extjs 文章标签： Extjs Extjs登录窗口 Extjsform表单的提交与后台的交互

本文链接：https://blog.csdn.net/weixin_43841301/article/details/99982962

版权

Extjs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这里是引用
话不多说上代码，代码中都添加了你们所需要的只是有啥不懂的可以直接留言。
我这里才用的是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>

漏气的可乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs学习笔记——登录窗口的使用

这里是引用话不多说上代码，代码中都添加了你们所需要的只是有啥不懂的可以直接留言。我这里才用的是6.2的框架<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head&g...
复制链接

扫一扫

专栏目录