`

Ext登陆窗口（有验证码的）

EXTCSSJavaScriptCacheprototype 
阅读更多

Ext登陆窗口代码，关键代码位于 login.js 中

html代码：

    

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
    2. 

  2. 

    3. 

  3. 
<html>

    4. 

  4. 

    5. 

  5. 
<head>

    6. 

  6. 

    7. 

  7. 
<title>wayfoon</title>

    8. 

  8. 

    9. 

  9. 
<metahttp-equiv="pragma"content="no-cache">

    10. 

  10. 

    11. 

  11. 
<metahttp-equiv="cache-control"content="no-cache">

    12. 

  12. 

    13. 

  13. 
<metahttp-equiv="expires"content="0">

    14. 

  14. 

    15. 

  15. 
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

    16. 

  16. 

    17. 

  17. 
<linkrel="stylesheet"type="text/css"

    18. 

  18. 

    19. 

  19. 
href="../ext/resources/css/ext-all.css">

    20. 

  20. 

    21. 

  21. 
<scripttype="text/javascript"src="../ext/ext-base.js"></script>

    22. 

  22. 

    23. 

  23. 
<scripttype="text/javascript"src="../ext/ext-all.js"></script>

    24. 

  24. 

    25. 

  25. 
<SCRIPTtype="text/javascript"src="../js/login.js"></SCRIPT>

    26. 

  26. 

    27. 

  27. 
<linkrel="stylesheet"type="text/css"href="../ext/resources/css/xtheme-slate.css"/>

    28. 

  28. 

    29. 

  29. 
<SCRIPTtype="text/javascript"src="../ext/ext-lang-zh_CN.js"></SCRIPT>

    30. 

  30. 

    31. 

  31. 
<scripttype="text/javascript">

    32. 

  32. 

    33. 

  33. Ext.onReady(function()
    34. 

  34. 

    35. 

  35. {
    36. 

  36. 

    37. 

  37. Ext.MessageBox.alert('haha','o(∩_∩)o...哈哈');
    38. 

  38. 

    39. 

  39. })
    40. 

  40. 

    41. 

  41. 
</script>

    42. 

  42. 

    43. 

  43. 
</head>

    44. 

  44. 

    45. 

  45. 

    46. 

  46. 

    47. 

  47. 
<body>

    48. 

  48. 

    49. 

  49. 
</body>

    50. 

  50. 

    51. 

  51. 
</html>

    52.

login.js 代码：

  1. Ext.onReady(function(){
  2. //开启表单提示
  3. Ext.QuickTips.init();
  4. //设置提示信息位置为边上
  5. Ext.form.Field.prototype.msgTarget='side';
  6. varwin=newExt.Window({
  7. id:'login-win',
  8. title:'登陆',
  9. iconCls:'tabs',
  10. width:300,
  11. height:120,
  12. collapsible:true,
  13. plain:true,
  14. //初始化表单面板
  15. items:newExt.form.FormPanel({
  16. id:'login-form',
  17. labelWidth:50,//默认标签宽度板
  18. labelAlign:'right',
  19. buttonAlign:'center',
  20. //不设置该值，表单将保持原样，设置后表单与窗体完全融合
  21. baseCls:'header',
  22. layout:'form',
  23. defaults:{
  24. width:200
  25. },
  26. //默认字段类型
  27. defaultType:'textfield',
  28. items:[{
  29. id:'username',
  30. fieldLabel:'账号',
  31. allowBlank:false
  32. //禁止为空
  33. },{
  34. id:'password',
  35. inputType:'password',
  36. fieldLabel:'密码',
  37. allowBlank:false
  38. }],
  39. //初始化按钮
  40. buttons:[{
  41. text:'登陆',
  42. type:'submit',
  43. handler:function(){
  44. varbut=this;
  45. but.setDisabled(true);
  46. this.setText('正在登陆');
  47. //将表单提交
  48. Ext.getCmp('login-form').getForm().submit({
  49. url:'/XXX/login.action',
  50. method:"POST",
  51. success:function(form,action){
  52. document.location='/XXX/main.jsp';
  53. },
  54. failure:function(){
  55. but.setText("登陆");
  56. but.setDisabled(false);
  57. }
  58. });
  59. }
  60. }]
  61. })
  62. });
  63. //将窗口显示出来
  64. win.show();
  65. });

分享到：
| JQuery技巧总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext3.0 实现验证码

    在Ext3.0中实现验证码不仅需要前端的JavaScript技术，还需要对服务器端的处理逻辑有深入理解。同时，考虑到用户体验和安全性，验证码的设计也需要兼顾易用性和防破解能力。通过这样的实现，我们可以创建出一个既安全...

    EXT登陆验证码

    EXT登陆验证码是一种安全机制，常用于网络应用中增强用户账户的安全性。在登录过程中，EXT验证码的目的是防止恶意机器人、自动化脚本或者未经授权的第三方尝试非法访问用户的账号。EXT可能是EXTension的缩写，暗示这...

    Ext实现验证码的关键代码

    在IT行业中，验证码是一种常见的安全机制，用于防止自动化的机器人或恶意软件进行非法操作，如批量注册、恶意登录等。验证码通常需要用户识别并输入图片中的文字或数字，以此验证用户是真实的人而不是机器。本篇文章...

    各种弹出窗口 ext窗口

    EXT 2.0 MessageBox 和 JavaScript 弹出窗口是两种在 Web 应用程序中常见的用户交互方式。它们允许开发者向用户展示信息、询问问题或获取输入。EXT 是一个流行的 JavaScript 框架，特别是它的 EXT JS 库，用于构建富...

    WindowLite 基于EXT的可拖动改变大小的提示窗口 v2.0

    WindowLite是一款基于EXT JavaScript库开发的可拖动和改变大小的提示窗口工具，适用于Web应用程序中的弹出消息或用户交互场景。EXT是一个强大的前端开发框架，它提供了丰富的组件和功能，使得开发者能够构建复杂的、...

    EXT代码-登陆窗口

    EXT代码-登陆窗口

    jmeter 获取验证码实现有验证码登录接口测试 必备VcodeExtractor.jar 包

    必备VcodeExtractor.jar 包，放进jmeter\lib\ext目录下，重启jmeter 就可以使用了

    extjs 登陆页面+验证码

    标题中的“extjs 登录页面+验证码”表明我们要讨论的是使用ExtJS框架构建的一个登录页面，其中包含了验证码功能。ExtJS是一个流行的JavaScript库，用于构建桌面级的Web应用程序，它提供了丰富的用户界面组件和强大的...

    ext4.1登陆界面

    描述中的"ext4.1简单的登陆界面 包含login.jsp 验证码.jsp"进一步说明了这个登录系统的基本构成。`login.jsp`是JavaServer Pages（JSP）文件，这是一种动态网页技术，用于处理用户登录请求，将用户的输入与服务器端...

    Extjs4登录功能+验证码+struts2

    在"Extjs4登录功能+验证码+struts2"这个主题中，我们将深入探讨如何利用ExtJS4构建一个带有验证码功能的登录界面，并结合Struts2后端框架实现数据验证和处理。 首先，登录功能是Web应用的基础部分，通常包含用户名...

    这是关于EXT框架代码的登录窗口相关资源文件

    在给定的资源文件中，"EXT代码-登陆窗口.rar"显然是主要的关注点，它包含了EXT框架用于创建登录窗口的相关代码。 登录窗口是Web应用中的常见功能，通常包括用户名输入框、密码输入框、登录按钮以及可能的记住密码、...

    ExtDesigner视频教程（设计登录窗口）

    在本“ExtDesigner视频教程”中，我们将深入探讨如何使用该工具来设计一个基本的登录窗口，这对于任何Web应用来说都是至关重要的功能模块。 首先，让我们了解ExtDesigner的工作原理。它提供了一个所见即所得的编辑...

    ext java登录案例

    在本文中，我们将深入探讨如何使用EXT Java技术创建一个登录案例。EXT Java是一个强大的JavaScript库，专门用于构建富客户端Web应用程序。它提供了丰富的组件库，包括数据网格、表单、图表等，使得开发者能够轻松...

    EXT登陆系统，感受ext的强大，希望大家好好学习ext，用这个开发的公司还是不少的

    EXT登陆系统就是使用EXT框架开发的登录页面，展示了EXT在创建交互式用户界面方面的卓越能力。 EXT的核心是其组件模型，这使得开发者能够快速搭建各种UI元素，如按钮、表格、面板、表单等。在EXT登录系统中，可能...

    ext3.jar ext使用非常多

    EXT框架的核心在于其丰富的组件库，包括数据网格、表单、窗口、工具栏、菜单等，这些组件具有高度可定制性和交互性，使得开发者可以轻松创建出功能强大、界面美观的Web应用。EXT3是EXT发展中的一个重要阶段，它引入...

    Windows 7下使用Ext2Fsd读取写入Linux Ext3&Ext4分区文件

    然而，有了第三方工具如Ext2Fsd，Windows用户可以实现对这些Linux文件系统的读取和写入操作。本文将详细介绍如何在Windows 7环境下使用Ext2Fsd来处理Linux Ext3和Ext4分区。 **Ext2Fsd是什么？** Ext2Fsd...

    EXT 登录的设计 extjs4.0

    4. **存储（Store）**：尽管登录通常不涉及本地存储，但在EXTJS中，`Ext.data.Store` 可用于管理数据源，如果需要处理登录历史或缓存登录状态，可以考虑使用。 5. **代理（Proxy）**：登录请求需要发送到服务器进行...

    ext下载包,ext,ext包,ext下载

    3. 创建并配置EXT组件，如窗口、面板、表格等。 4. 加载和处理数据，使用EXT的数据模型和store。 5. 如果需要，添加适配器以与其他库兼容。 6. 在页面加载完成后初始化EXT应用。 EXT是一个功能强大的前端框架，特别...

    ext登陆界面和布局

    ext2.2包括登陆页面和主框架页面。 简洁，漂亮

Magicbox
Global site tag (gtag.js) - Google Analytics