2.3登录页面
深入剖析ExtJS 2.2实现及应用连载 版权所有，谢绝转载 作者：彭仁夔 QQ：546711211
登录页面是每个B/S系统都必不可的页面，只要登录之后才能进行系统中的操作。它也是一个系统的门面，优雅美观的登录页面也会给用户的良好的体验感觉，我们的办公系统最终的登录页面的效果如下：
图2.2 登录页面
为了实现这样的页面，我们首先得建立一个default.html文件，用它来做为默认的项目首页。因为我们在这里是要采用Ext的方式来实现，所以在页面的头文件中得加上Ext的文件引用。如下代码：
代码清单2.1 default.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css" />
<script type="text/javascript"
src="extjs/adapter/ext/ext-base.js"/></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="javascript/Login.js"></script>
<title>第二章 办公系统登录例子</title>
</head>
<body></body>
</html>
在这里，我们得引用其CSS样式文件，对于其JS文件，要分成两个部分来引用，一个是其ext-base文件，它是ext的基础文件，这一部分可以别的适配器来代替的，如jquery.js、ext-jquery-adapter.js这个两个文件就可以代替ext-base来完成让整个Ext建立在jquery的基础之上，接下来就是ext-all文件，在这里我们引用其调试文件，方便调试用，在实际应用中，我们就直接引用ext-all.js文件。
接下来，我们看到一个Login.js文件，这个文件是我们实现登录页面自已实现的代码。对于自己开发的代码，是一定要在整个Ext文件完成运行或其Dom元素也已经载入的时候，才能运行自行开发的代码。也就是Login.js中要通过Ext.onReady()来作为自行代码的入口。Ext.onReady的参数是函数。我们要实现的就是这个函数参数。
一般来说，对于一个Ext的系统入口函数，都应用初始化其传输的编码方式、状态管理、Tip提示。尽管这编码方式是有默认的，但是为了统一起来，还是声明比较好一点，对于状态管理，Tip提示，很多组件都会用到它们，不初始化不会出错，但是有的功能是实现不了，最好还是初始化它们。我们来实现：
代码清单2.2 Login.js
Ext.BLANK_IMAGE_URL = 'pic/blank.gif';
var login = function() {
Ext.QuickTips.init();
Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//实现具体的功能
};
Ext.onReady(login);
在上面的代码中，我们重新指定了Ext.BLANK_IMAGE_URL的图片的地址，其默认是http://extjs.com/blank.gif。这依赖于网络。我们一般都是把这个图片下载到本地来，这里就存放在pic的文件夹中。
接下的代码就是实现login函数。在这个函数中完成三个最基本的操作。第一Tip提示的初始化工作，第二是把Ajax的传输方式都统一为了utf-8编码，如果没有设定这里，可能会出现编码问题，这个和web.xml中utf-8的编码方式是统一起来，一个是传到服务器的编码，一是传到客户端的编码。第三是状态管理，这里采用了cookie的状态管理方式，也就是一些状态的数据保存在cookie中。
到现在为止，页面的初步工作已经完成。接着要做的就是如何去实现上图的布局和样式。下一节进行分析。
2.2.1页面布局
假如美工给了我们于如图2.2的登录页面的图片，那么我们如何把它去布局到网页中去。首先要做的当然是切图，怎么去切分图片呢？按着正常的网页中的实现，都会把它分成上、下、中左、中右四个部分来进行切图。之后把这四个部分拼凑组装起来。组装的方式一般有二种，一是采用table布局，一种是采用div+CSS布局。对于table布局，我可以采用如下的方式：<table border="0">
<tr> <td colspan="2">top图片</td> </tr>
<tr> <td>left图片</td> <td>form表单</td> </tr>
<tr> <td colspan="2">button图处</td> </tr>
</table>
这是传统的布局方式，而div+CSS的布局也是很流行的方式，看一下CSS如何布局：
<div>
<div id='toppic'></div>
<div id='leftpic' style="clear:right;"></div>
<div id='form' style="float:left"></div>
<div id='buttonpic'></div>
</div>
对于上面的div+CSS的布局，我们要通过style的样式精确地确定其每个div的宽高，之后通过浮动的方式来实现文档的布局。表格布局对于像这样的拼凑图片是很麻烦的，因为要要做到图片之间没有间隙。DIV+CSS的布局则是浏览器兼容性不好，同时在样式上的调整也很复杂。下面我们就通过Ext的布局来实现它。
网页中布局是很重要的一部分，对于布局，它不像table和div一样，要手动去布局，它专门提供了这方面的实现，它提供了几种布局，对于如上图的上，下，中左，中右四个部分的布局，我们可以采用它的border布局。
Border布局把一个面板分成上、下，左、中、右五个部分，如果没有指定其中的某一些部分，它相邻的部分就会扩展去占据其没有指定的部分，但是其中间部分是必不可少的，对于上图4个部分，我们可以采用省去Border布局中右部分来实现。
布局的功能是集成在Panel类中，我们通过都是通过使用其Panel类或子类来实现页面的相关布局。在实现布局之前，我们要在default.html文件的body中加上一个div块：<div id='loginpanel' ></div>用来呈现的panel生成的元素。我们按如下代码实现布局：
代码清单2.3 login.js 布局片断
var panel = new Ext.Panel( { ①
renderTo : 'loginpanel', ②
layout : "border", ③
width : 525,
height : 290,
defaults:{border : false}, ④
items : [ { ⑤
region : "north",
height : 56,
html : '<img src="pic/head.gif"/>'
}, { ⑥
region : "south",
height : 56,
html : '<img src="pic/foot.gif"/>'
}, { ⑦
region : "west",
width : 253,
html : '<img src="pic/left.gif"/>'
}, { ⑧
region : "center",
html : '<img src="pic/form.gif"/>'
}]
});
这一段代码我们放在代码2.2中的注释部分下面，面板的布局有二个重要的配置项，一个在③处的layout用来指定布局方式，我们指定其为border的布局。对于布局的子项则通过其配置项items来完成，它是一个数组，用来存放布局中的子项。其中每个子项中都要一有一个region配置项指定它在面板的什么位置，有五种位置的选择：north、south、west、east、center。
指定完在布局方式，我们接着要指定面板及各个子项的宽高。③处width和heigth指定整个面板的宽高。对于面板的子项，其north和south会直接采用面板宽度，不要指定，但是要指定其高度。对于中间的west、east我们不要指定其高度。而是要指定宽端。高度会自动计算出来。对于center，我们宽高都要不指定了。也会自动计算的。
这样面板的效果就出来了，但是我们会发现多每个子项边上都会有边线分隔。因为其默认是采用有边框，像表格一样。我们可能通过④来指定每个子项的边框都为无。这样就达到图2.2中效果。
但是现在整个面板并不是呈现在网页的中正中间，而是网页的开始。那么我们就要让它显示在网页中中间。Ext.get('loginpanel').center(Ext.getBody());是找到id为'loginpanel'的div，然后让它在body中居中。这个居中只能把垂直居中，也就是面板在左边的中间。原因是loginpanel'的div并不是绝对定位，它会占有文档流，所以移不动，我们采用如下的代码：
Ext.get('loginpanel').setStyle('position', 'absolute')
.center(Ext.getBody());
先让它的定位方式为绝对定位，这里是通过代码来指定，我们也可以在div的style中直接指定。现在就达到了我们所要的效果。但是form部分只是图片，在下面一节中，我们把这个图片换成form元素。
深入剖析 ExtJS 2.2 实现及应用连载 版权所有，谢绝转载 作者：彭仁夔 QQ ： 546711211
45
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
