[ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转

简介:

mvvm方式实现登陆的博客:http://blog.csdn.net/sushengmiyan/article/details/38815923

本文作者:sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

之前写过一篇文章,是 Extjs5MVVM模式下系统登录实例 这文章写完之后,有人就提出了一个疑问,就是每次点击都会弹出登陆这个登陆窗体,想实现登陆之后就不再有登陆窗体这个界面,正因为那个问题于是产生了今天这篇文章。

方法一:官方网站---登陆体验实例:http://docs.sencha.com/extjs/5.0/tutorials/login_app.html  增加一个登陆的标志,根据登陆与否,显示不同的界面

方法二:使用window.open实现网页跳转。

第一步:下载extjs5   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文件。感觉还不错。


最终效果---登录页面

登录跳转之后


页面跳转之后,URL也完成了。


相关文章
uniapp解决首页subNvue,hide方法关闭不了问题
uniapp解决首页subNvue,hide方法关闭不了问题
|
6月前
|
JavaScript C#
C#winForm程序与html JS交互调用
C#winForm程序与html JS交互调用
|
移动开发 JavaScript 前端开发
【Axure教程】在Axure中引用html、ccs、js等代码
【Axure教程】在Axure中引用html、ccs、js等代码
【Axure教程】在Axure中引用html、ccs、js等代码
|
小程序
【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果
1、小程序效果演示 (1)点击添加基金按钮,跳转到添加基金的页面,目前该页面(pages/index/main)有两个基金。
663 0
【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果
|
Web App开发 JavaScript 容器
|
JavaScript
js/jq仿window文件夹框选操作插件
0.先给大家看看效果: 1.创建一个index.html文件 Title ul{list-style: none} li{width:200px;margin:10px;float:left;height: 100px;background: #ccc;border: 1px solid #fff;} .
1009 0
|
前端开发 JavaScript 容器
使用jQuery创建模态窗口登陆效果
来源:GBin1.com 在线下载 在线演示 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素。社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单。在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中。
1118 0