要实现登陆表单,有两部分代码:login.html, adminlogin.js。
1、 login.html
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>168促销管理页面</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-header">168促销管理平台 </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中介绍。