该资源提供了一个使用 ExtJS 构建的简单登录页面示例,其中包含具体的代码实现,强调了引用位置的注意事项。主要涉及的技术点有 ExtJS 的组件使用、表单验证以及页面交互。
在 ExtJS 开发中,`Ext.onReady` 是页面加载完成后执行的函数,用于确保在DOM完全加载后执行JavaScript代码,这是初始化 ExtJS 应用程序的常见方式。`Ext.form.Field.prototype.msgTarget='side';` 这行代码将所有表单字段的消息提示目标设置为侧面显示,这意味着表单验证错误信息会出现在输入框的右侧。
`Ext.QuickTips.init();` 初始化快速提示功能,允许用户在鼠标悬停在特定元素上时显示提示信息。
`var staffForm = new Ext.FormPanel({ ... });` 创建了一个表单面板,它是 ExtJS 中用于构建表单的容器。配置项包括 `el` 指定挂载的 DOM 元素,`id` 和 `name` 为表单面板提供唯一标识,`height` 定义高度,`activeTab` 设置默认激活的选项卡,`deferredRender` 控制是否延迟渲染,`border` 是否显示边框,以及 `items` 定义面板中的内容。
在 `items` 中,创建了一个 `xtype: 'panel'` 的子面板,具有默认属性和布局。`contentEl: 'loginInfo'` 指定了内容来自 HTML 中 id 为 "loginInfo" 的元素,`layout: 'form'` 使子面板采用表单布局,`defaults` 设置子面板内所有组件的默认样式,如高度和内边距,而 `defaultType: 'textfield'` 指定默认的组件类型为文本字段。
接着定义了两个表单字段,一个是用户名输入框,一个是密码输入框,都设置了 `allowBlank: false` 表示不允许留空,并且配置了验证提示信息。`inputType: 'password'` 将输入框类型设为密码,以隐藏输入的字符。
最后,创建了一个 `Ext.Window` 对象,作为弹出窗口展示登录表单。窗口配置包括不可拖动 (`draggable: false`)、不可调整大小 (`resizable: false`)、布局为表单 (`layout: "form"`),以及预设的宽度和高度。窗口中包含了 `staffForm` 表单面板,并定义了登录按钮,点击时提交表单到指定 URL(在这个例子中是本地服务器地址)进行验证。
通过这个示例,我们可以学习到 ExtJS 中如何创建表单、设置表单验证、创建窗口组件以及处理表单提交等核心功能。对于初学者来说,这是一个很好的起点,可以帮助理解 ExtJS 构建登录界面的基本步骤和配置。同时,对于有经验的开发者,这个示例也能作为一个快速参考,用于快速搭建类似的页面。