EXTJS综合演练-计算机.docxVIP

使用Ext做第一个界面 登陆界面 目标： 了解Ext的加载 用Ext编写一个简单的登录窗体 在项目开发过程中，经常出现的第一个界面，应该是登陆界面。界面信息无非是一个提交表单，里面有个用户名、密码、校验码和登录、取消按钮。如下图： 那我们怎么样用Ext来完成如上登陆界面的实现呢？ 在Ext中，有一个面板叫FormPanel，里面包含一个Form，我们接下来用FormPanel来实现这个登陆表单。 要实现登陆表单，有两部分代码：login.html， adminlogin.js。 login.html 代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title168促销管理页面/title !—第一块 ? link rel=stylesheet type=text/css href=../ext/resources/css/ext-all.css / link href=../css/style.css rel=stylesheet type=text/css / link href=../css/admin.css rel=stylesheet type=text/css / style type=text/css !-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 宋体; font-size: 12px; color: #333333; background-color: #2286C2; } .STYLE2 {font-size: 13px} -- /style !—第二块? script type=text/javascript src=../js/tools.js/script script type=text/javascript src=../ext/adapter/ext/ext-base.js/script script type=text/javascript src=../ext/ext-all.js/script script type=text/javascript src=../js/adminlogin.js/script /head body !—第三块 ? div id=hello-win class=x-hidden div class=x-window-header168促销管理平台 /div /div div id=loginHeader img src=../images/logo.png/ /div /body /html 第一块粗体代码，是login.html页面对样式的引用。第一个样式是Ext的自带样式，后面两个是我们自己定义的样式。 第二块粗体代码，是login.html页面对js脚本的引用，在ext目录下的，都是Ext自带的组件js，js目录下的，是我们自己编写的js（tools.js 和 adminlogin.js）。我们后面详细的介绍，这是使用Ext编写界面的重点逻辑。 第三块粗体代码，是标准的div hello-win 和div loginHeader。hello-win将作为一个Ext窗体的母版，loginHeader将作为logo标记块，融入我们编写的Ext窗体。具体使用将在adminlogin.js中介绍。 adminlogin.js adminlogin.js是Ext界面生成的关键代码。 整个代码是包含在Ext.onReady();方法内部的。 在网页加载完后，浏览器会自动调用Ext.onReady()中包含的函数代码。 也就是说页面加载完后，会触发加载完事件，调用其中的function（）部分代码。 adminlogin.js代码如下： Ext.onReady(function(){ //指定表单提示信息的提示方式。 // 分别有under, side, qtip 等值。 // under是在表单域下面提示 side是在表单域的右边显示提示信息（鼠标放在提示图标上有文字提示） qtip是在表单中弹出提示。我们这里选用 side方式。 Ext.form.Ftotype.ms