一步一步学习ExtJS4——页面布局(图文实例)主讲：许家志.doc

——页面布局——许家志目标效果:这种布局方式,经常在一些大型的B/S后台系统中可以看得到,ordion布局还有Border布局,具有广泛的应用价值,这节我们主要讲简单的布局实现,美工以及事件响应将在下一节讲先决条件: ,然后引用到你的案例中,这里我们的引用顺序是固定的,先引用外观(CSS),在引用行为(JS)在这个例子中,加上自己的脚本文件,我是这样引用的:ExtJS为我们提供了丰富的组件,我们为我们用到的进行讲解,首先是Panel,,(config)下面我们用里面的简单几个属性,来构造一个最简单的面板,代码如下:效果图如下:小例子中定义了一个新的Panel,通过new()方法来实现,其中方法参数为一个包含了各种参数配置的的Jason格式对象{key:value,……},这里我们用的只有几个而已,截图中已经做出了注释,不难看出,所有的配置属性,都是我们熟知的英文单词,这为我们同时学****专业英语也提供了一个难能可贵的契机。第一部分Border布局在本实例中呢,我们需要特地试用几个比较尤其配置属性,他们分别是layout,border,和region,layout指定了在该面板中,试用的布局方式,而border则配置面板是否含有边框(1个像素),最后region则是在viewport中用来实现指定方位的实例中不难看出,我们的页面中包含了3个面板,分别占据了上,左和右,其实,在ExtJS中,他的region为我们提供了4个方位为我们布局,分别为东南西北中,对应的属性值也是对应的英文,分别为east,south,west,north,,我们看地图的“上北下南左西右东”标准,为了实现本例中的效果,我们这里先构建虽简单的三个面板,为了确定其方位,必须指定其方位,代码如下: varpanelNorth=({region:'north'})///上 varpanelWest=({region:'west'})///左varpanelCenter=({region:'center'})///中我们这里所创建的三个面板要通过Viewport来组装到一个页面上,这里我们也定义一个函数来完成这个功能,需要说明的是,layout在这种情况下,必须使用border,这样才能看到我们分开的3个区域,buildAViewport=function(){ varv=({ layout:'border', items:[panelNorth,panelWest,panelCenter] }),就可以在页面中看到我们构建的三个区域,只是在此时,三个panel的样式都是很低级的,什么也没有,我们这时通过其他选项来丰富他一下,这里我们一个一个来,首先是上面,我们将构建参数修改如下上:左:此时,我们得到的页面也算是差不多整体布局出来了在此之前呢,我们所讲的完全围绕着的是Border布局,下面呢为了完善整个页面,中间呢,我们可能会遇到一些小小的问题,这里我们可以通过实验来解决。为什么在Viewport的设置参数里面,非要用border?原因很简单,相信做过web设计的人都曾遇到过这样一个问题“为什么要在具体实现左右布局的时候要用到float属性”,这样对比理解就可以了,border布局,实现了部分