深入剖析ExtJS 2.2实现及应用连载(7):页面布局

2.3登录页面

登录页面是每个B/S系统都必不可的页面，只要登录之后才能进行系统中的操作。它也是一个系统的门面，优雅美观的登录页面也会给用户的良好的体验感觉，我们的办公系统最终的登录页面的效果如下：

图2.2 登录页面

为了实现这样的页面，我们首先得建立一个default.html文件，用它来做为默认的项目首页。因为我们在这里是要采用Ext的方式来实现，所以在页面的头文件中得加上Ext的文件引用。如下代码：

代码清单2.1 default.html

<html>

<head>

href="extjs/resources/css/ext-all.css" />

src="extjs/adapter/ext/ext-base.js"/></script>

<title>第二章办公系统登录例子</title>

</head>

</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>

对于上面的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元素。

posted on 2008-12-08 12:37 彭仁夔阅读(6284) 评论(1) 编辑收藏举报