`
83026191
  • 浏览: 45702 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs简单登陆窗体

阅读更多
html代码:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>     <head>         <title>wayfoon</title>         <meta http-equiv="pragma" content="no-cache">         <meta http-equiv="cache-control" content="no-cache">         <meta http-equiv="expires" content="0">         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">         <link rel="stylesheet" type="text/css"             href="../ext/resources/css/ext-all.css">         <script type="text/javascript" src="../ext/ext-base.js"></script>         <script type="text/javascript" src="../ext/ext-all.js"></script>         <SCRIPT type="text/javascript" src="../js/login.js"></SCRIPT>         <link rel="stylesheet" type="text/css" href="../ext/resources/css/xtheme-slate.css" />         <SCRIPT type="text/javascript" src="../ext/ext-lang-zh_CN.js"></SCRIPT>         <script type="text/javascript">         Ext.onReady(function()         {             Ext.MessageBox.alert('haha','o(∩_∩)o...哈哈');         })         </script>     </head>       <body>     </body> </html>

login.js 代码:



Ext.onReady(function() {
    // 开启表单提示
    Ext.QuickTips.init();
    // 设置提示信息位置为边上
    Ext.form.Field.prototype.msgTarget = 'side';
    var win = new Ext.Window({
        id : 'login-win',
        title : '登陆',
        iconCls : 'tabs',
        width : 300,
        height : 120,
        collapsible : true,
        plain : true,
        // 初始化表单面板
        items : new Ext.form.FormPanel({
            id : 'login-form',
            labelWidth : 50, // 默认标签宽度板
            labelAlign : 'right',
            buttonAlign : 'center',
            // 不设置该值,表单将保持原样,设置后表单与窗体完全融合
            baseCls : 'header',
            layout : 'form',
            defaults : {
                width : 200
            },
            // 默认字段类型
            defaultType : 'textfield',
            items : [{
                id : 'username',
                fieldLabel : '账号',
                allowBlank : false
                    // 禁止为空
                    }, {
                        id : 'password',
                        inputType : 'password',
                        fieldLabel : '密码',
                        allowBlank : false
                    }],
            // 初始化按钮
            buttons : [{
                text : '登陆',
                type : 'submit',
                handler : function() {
                    var but = this;
                    but.setDisabled(true);
                    this.setText('正在登陆');
                    // 将表单提交
                    Ext.getCmp('login-form').getForm().submit({
                        url : '/XXX/login.action',
                        method : "POST",
                        success : function(form, action) {
                            document.location = '/XXX/main.jsp';
                        },
                        failure : function() {
                            but.setText("登陆");
                            but.setDisabled(false);
                        }
                    });
                }
            }]
        })
    });
    // 将窗口显示出来
    win.show();
});
分享到:
评论

相关推荐

    extjs分割窗体的例子

    使用extjs做的一个分割窗体的例子,入门型的,

    extjs简单登陆

    ext extjs 登陆

    EXTJS3.0登陆DEMO

    EXTJS3.0登录DEMO是一个基于EXTJS框架的示例项目,展示了如何将EXTJS与STRUTS2、SPRING和IBATIS等流行Java技术整合,构建一个完整的Web应用程序。EXTJS是一个用于创建富客户端界面的JavaScript库,而STRUTS2、SPRING...

    extjs实现登陆验证

    在IT领域,特别是Web开发中,使用ExtJS框架进行用户登录界面的前端验证是一个常见的需求。根据提供的文件信息,我们可以详细解析如何利用ExtJS来实现这一功能。 ### ExtJS实现登录验证 #### 核心概念与流程 1. **...

    extjs—登陆小例子

    extjs—登陆小例子

    EXTJS简单MVC实例

    只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载

    ExtJs 登陆框、框架

    在“C# Extjs 登陆框、框架”这个主题中,我们主要关注的是如何使用ExtJS创建一个登录界面,并结合C#后端实现用户验证。登录框是任何应用程序的基础元素,它通常包含用户名和密码字段,以及登录和取消按钮。在ExtJS...

    extjs4登陆小例子

    extjs4是权限 网络分享资料中修改而来。 extjs4+ spring3 + hibernate3.3+ struts2.1.8 + mysql5.04+ xp + myEclipse 8.5 测试通过 。 extjsdemo.rar

    extjs2.0 使用简明教程之窗口分组

    extjs2.0 使用简明教程之窗口分组,实现分组窗体

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    extjs 简单分页例子

    在这个“EXTJS简单分页例子”中,我们将深入探讨EXTJS如何实现分页功能,以及如何与后台进行交互。 分页是Web应用中常见的数据展示方式,尤其在处理大量数据时,它可以提高页面加载速度并提供良好的用户体验。EXTJS...

    extjs3.0 组件

    EXTJS 提供了简单易用的API来创建和管理右键菜单,可以轻松地将其与任何组件关联,如表格、树形视图等。这为用户提供了更直观的交互方式,提升了应用的易用性。 在EXTJS 3.0 中,网格(Grid)组件也是不可或缺的一...

    Extjs简单版酒店管理系统

    《Extjs简单版酒店管理系统详解》 ExtJS是一款强大的JavaScript框架,用于构建富客户端Web应用程序。它提供了丰富的组件库和灵活的布局管理,使得开发者能够快速构建出功能丰富的交互式界面。本文将深入探讨如何...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS的事件系统使得绑定和处理这些事件变得简单。 7. **可视化编辑**:为了提高用户体验,设计器通常会提供撤销/重做、选择、复制/粘贴等可视化编辑功能。这些可以通过ExtJS的命令模式和组件方法实现。 8. **验证...

    extjs+ssh写的登陆系统

    EXTJS + SSH 构建的登录系统是一种常见的前端与后端结合的应用开发方式。EXTJS 是一个基于 JavaScript 的富客户端框架,它提供了丰富的组件库,用于构建用户界面,特别是企业级应用。SSH 框架则由 Spring、Struts 和...

    extjs简单示例。带程序。

    在“extjs + asp.net简单示例”中,我们将看到EXTJS如何与微软的asp.net后端技术结合,共同完成一个Web应用。 在ASP.NET中,开发者通常使用C#或VB.NET编写服务器端代码,处理数据、业务逻辑以及与数据库的交互。而...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    ExtJs做的后台登陆asp程序

    ExtJs做的后台登陆asp程序,版权归原作者所有。

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    extjs 简单表格

    "extjs 简单表格"这个主题,我们将探讨如何在ExtJS中创建和使用基本的表格。 首先,我们需要理解ExtJS表格的基本结构。表格由多个部分组成,包括Store(数据存储)、Model(数据模型)、Column Model(列模型)和...

Global site tag (gtag.js) - Google Analytics