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


相关文章
|
负载均衡 Linux 网络协议
面向C10M时代的MiddleBox之 - 高性能四层负载均衡设备AGW
面对需求的不断提高,几年前我们还在为解决C10K 问题而努力,现在已经开始面临C10M 问题的挑战。
2085 0
|
9月前
|
人工智能 自然语言处理 算法
生成式人工智能认证(GAI认证)与标准化进程协同发展及就业市场赋能研究
本文探讨生成式人工智能认证(GAI认证)在人工智能标准化进程中的重要性,分析其对就业市场的积极影响及未来发展趋势。GAI认证不仅是个人AI能力的权威认可,还推动行业标准化与技术创新。文章指出,随着技术融合加速和应用场景拓展,GAI认证标准需不断完善,以应对技术更新、数据安全等挑战,为AI健康发展贡献力量。
|
弹性计算 运维 监控
两招玩转阿里云系统事件监控
两招玩转阿里云系统事件监控,教你如何快速使用云监控监控阿里云重要系统事件。
816 215
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
283 6
|
数据采集 存储 编解码
一份简明的 Base64 原理解析
Base64 编码器的原理,其实很简单,花一点点时间学会它,你就又消除了一个知识盲点。
589 3
|
Web App开发 IDE 测试技术
自动化测试的利器:Selenium 框架深度解析
【10月更文挑战第2天】在软件开发的海洋中,自动化测试犹如一艘救生艇,让质量保证的过程更加高效与精准。本文将深入探索Selenium这一强大的自动化测试框架,从其架构到实际应用,带领读者领略自动化测试的魅力和力量。通过直观的示例和清晰的步骤,我们将一起学习如何利用Selenium来提升软件测试的效率和覆盖率。
|
Java 应用服务中间件 API
如何安装与使用Java EE 8、Servlet 3.0及Apache Maven进行高效开发
【7月更文第1天】搭建高效Java EE 8开发环境,包括安装JDK、选择WildFly或Payara Server作为应用服务器,以及安装Apache Maven。使用Maven创建Servlet 3.0 Web项目,编写 HelloWorldServlet,打包部署到服务器,通过访问特定URL测试应用。这一流程助力开发者实现快速原型和大型项目开发。
541 0
|
Linux 开发者 iOS开发
Python中使用Colorama库输出彩色文本
Python中使用Colorama库输出彩色文本
|
监控 网络协议 网络安全
SMTP操作使用详解并通过python进行smtp邮件发送示例
SMTP操作使用详解并通过python进行smtp邮件发送示例
624 3
|
JavaScript 应用服务中间件 nginx
【项目部署系列教程】4. 将Vue项目部署到远程服务器
【项目部署系列教程】4. 将Vue项目部署到远程服务器
651 1