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


    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40427543

    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也完成了。


  • 相关阅读:
    阅读ajax.pdf
    XPath 学习
    随想
    Angular JS 学习
    Angular JS 学习
    URL Rewrite in IIS with Regular Pattern
    LinQ In Action 学习第四章
    GC垃圾回收
    jvm底层
    类加载流程
  • 原文地址:https://www.cnblogs.com/muyuge/p/6152486.html
Copyright © 2020-2023  润新知