ExtJs学习资料47-完整的登录实例(不带验证码).doc

在本篇【ExtJs学习资料47-完整的登录实例(不带验证码)】中，我们将深入探讨如何使用ExtJs框架创建一个基本的登录界面。ExtJs是一个强大的JavaScript库，用于构建富客户端应用程序，它提供了丰富的组件和布局管理功能。下面我们将详细讲解实现登录实例的关键步骤和涉及的技术点。 为了使用ExtJs框架，我们需要引入必要的文件。在`Global.js`中，我们通常会把这些引用集中起来，包括CSS样式表和JavaScript库。在示例中，我们看到了以下引入： 1. `ext-all.css`：这是ExtJs的主要样式文件，用于定义组件的外观。 2. `ext-base.js`：适配器文件，确保ExtJs与不同的JavaScript库（如 Prototype 或 jQuery）兼容。 3. `ext-all.js`：包含所有ExtJs组件的核心JavaScript文件。 4. `ext-lang-zh_CN.js`：中文语言包，用于显示中文提示。 接下来，我们引入`Global.js`，这可能包含了其他自定义配置或通用函数。同时，加载了`Ext.form.login.js`，这是包含登录表单逻辑的脚本文件。 在样式部分，定义了一个`.icon`类，用于设置背景图片，这可能用于登录按钮或者其他图标。 登录界面的实现主要集中在JS源代码中，这部分展示了如何使用ExtJs的`Ext.FormPanel`创建表单。关键属性和方法包括： - `autoWidth` 和 `autoHeight`：自动调整表单的宽度和高度以适应内容。 - `renderTo`: 指定表单渲染到的HTML元素ID，这里是`myLogin`。 - `frame`: 是否显示边框，此处为真，显示圆角边框。 - `baseCls`: 设置表单的基础样式，这里设为`x-plain`，对应透明样式。 - `monitorValid`: 监控表单的有效性，如果表单中的字段无效，将禁用提交按钮。 - `labelWidth` 和 `labelAlign`: 控制字段标签的宽度和对齐方式。 - `defaultType`: 默认的字段类型，这里是文本输入框`textfield`。 - `defaults`: 为所有字段设定默认属性，如不允许空白`allowBlank: false`。 - `items`: 定义表单的字段，包括用户名和密码输入框，每个字段都有相应的属性，如`maxLength`和`minLength`，以及错误提示。 - `buttonAlign`: 按钮对齐方式，这里居中。 - `buttons`: 创建按钮，包括登录和重置按钮。登录按钮监听`click`事件，当表单有效时提交数据，并处理服务器响应。 在按钮的事件监听器中，我们看到`form.getForm().submit()`方法用于发送登录请求。此方法的参数包含了`url`（服务器接口地址）、等待提示、消息提示以及在成功或失败后的回调函数。在成功回调中，使用`Ext.Msg.alert`显示提示信息；在失败回调中，清空表单并显示错误信息。 这个登录实例展示了ExtJs构建交互式用户界面的基本流程，包括组件的创建、样式设置、事件处理以及与服务器的通信。理解这些核心概念对于深入学习和应用ExtJs至关重要。通过这个实例，开发者可以以此为基础，扩展出更复杂的业务逻辑和功能，例如添加验证码、记住密码、自动填充等。