[ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
最后更新于:2022-04-01 07:37:23
本文地址:[http://blog.csdn.net/sushengmiyan/article/details/40427543](http://blog.csdn.net/sushengmiyan/article/details/40427543)
mvvm方式实现登陆的博客:[http://blog.csdn.net/sushengmiyan/article/details/38815923](http://blog.csdn.net/sushengmiyan/article/details/38815923)
本文作者:[sushengmiyan](http://blog.csdn.net/sushengmiyan)
------------------------------------------------------------------------------------------------------------------------------------
之前写过一篇文章,是[ Extjs5MVVM模式下系统登录实例](http://blog.csdn.net/sushengmiyan/article/details/38815923) 这文章写完之后,有人就提出了一个疑问,就是每次点击都会弹出登陆这个登陆窗体,想实现登陆之后就不再有登陆窗体这个界面,正因为那个问题于是产生了今天这篇文章。
方法一:官方网站---登陆体验实例:[http://docs.sencha.com/extjs/5.0/tutorials/login_app.html](http://docs.sencha.com/extjs/5.0/tutorials/login_app.html) 增加一个登陆的标志,根据登陆与否,显示不同的界面
方法二:使用window.open实现网页跳转。
第一步:下载extjs5 [http://download.csdn.net/detail/sushengmiyan/7701943](http://download.csdn.net/detail/sushengmiyan/7701943)
第二步: 创建index.html和app.js,内容如下:
app.js
~~~
Ext.application({
name : 'EnterSellSaves',
launch : function() {
Ext.create('Ext.Panel', {
renderTo : Ext.getBody(),
width : 200,
height : 150,
bodyPadding : 5,
title : 'Hello World',
html : 'Hello <b>World</b>...'
});
}
});
~~~
index.html
~~~
<!DOCTYPE html>
<html>
<head>
<title>欢迎来到 Ext JS!</title>
<link rel="stylesheet" type="text/css" href="ext5/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="ext5/build/ext-all.js"></script>
<script type="text/javascript" src="ext5/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
~~~
在登陆界面,登陆按钮增加一个函数
onclick="login()"
函数实现如下:
~~~
<script type="text/javascript">
function login(){
window.opener = null;
window.open('','_self');
window.close();
window.open('index.html','11','location=0,resizable=no,fullscreen=true,titlebar=no,status=no,toolbar=no,menubar=no,left=0,top=0');
}
</script>
~~~
这样就能打开到index,html
对于逻辑判断,就可以更改为jsp啊ASP啊。
这个方法,可以使用sencha cmd生成应用程序框架,也可以使用自己手动引入js文件。感觉还不错。
最终效果---登录页面
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-02-03_56b214ebb28e1.jpg)
登录跳转之后
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-02-03_56b214ebd85c9.jpg)
页面跳转之后,URL也完成了。