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

1、【精品文档】如有侵权，请联系网站删除，仅供学习与交流一步一步学习ExtJS4页面布局(图文实例)主讲：许家志.精品文档.一步一步学习ExtJS4.0页面布局许家志目标效果：这种布局方式，经常在一些大型的B/S后台系统中可以看得到，应用的主要是Accordion布局还有Border布局，具有广泛的应用价值，这节我们主要讲简单的布局实现，美工以及事件响应将在下一节讲先决条件：从ExtJS4.0的官方网站上面下载了Ext的开发包，然后引用到你的案例中，这里我们的引用顺序是固定的， 先引用外观（CSS），在引用行为（JS）在这个例子中，加上自己的脚本文件，我是这样引用的：ExtJS为我们提供了丰富的组

2、件，我们为我们用到的进行讲解，首先是Panel，下图为Ext4.0帮助文档中的截图，主要介绍了Ext.Panel的各种配置属性(config)下面我们用里面的简单几个属性，来构造一个最简单的面板，代码如下：效果图如下：小例子中定义了一个新的Panel ，通过new Ext.Panel()方法来实现，其中方法参数为一个包含了各种参数配置的的Jason格式对象key:value,这里我们用的只有几个而已，截图中已经做出了注释，不难看出，所有的配置属性，都是我们熟知的英文单词，这为我们同时学习专业英语也提供了一个难能可贵的契机。第一部分 Border布局在本实例中呢，我们需要特地试用几个比较特别配置

3、属性，他们分别是layout,border,和region，layout指定了在该面板中，试用的布局方式，而border则配置面板是否含有边框(1个像素)，最后region则是在viewport中用来实现指定方位的实例中不难看出，我们的页面中包含了3个面板，分别占据了上，左和右，其实，在ExtJS中，他的region为我们提供了4个方位为我们布局，分别为东南西北中，对应的属性值也是对应的英文，分别为east,south,west,north,center.记忆方位也很简单，我们看地图的“上北下南左西右东”标准，为了实现本例中的效果，我们这里先构建虽简单的三个面板，为了确定其方位，必须指定其方位

4、，代码如下：var panelNorth=new Ext.Panel(region:'north')/上 var panelWest=new Ext.Panel(region:'west')/左 var panelCenter=new Ext.Panel(region:'center')/中我们这里所创建的三个面板要通过Viewport来组装到一个页面上，这里我们也定义一个函数来完成这个功能，需要说明的是，layout在这种情况下，必须使用border，这样才能看到我们分开的3个区域，buildAViewport=function()var v=

5、new Ext.Viewport(layout:'border',items:panelNorth,panelWest,panelCenter)这样我们只需要在Ext.onReady事件中把这一个函数运行起来，就可以在页面中看到我们构建的三个区域，只是在此时，三个panel的样式都是很低级的，什么也没有，我们这时通过其他选项来丰富他一下，这里我们一个一个来，首先是上面，我们将构建参数修改如下上：左：此时，我们得到的页面也算是差不多整体布局出来了在此之前呢，我们所讲的完全围绕着的是Border布局，下面呢为了完善整个页面，中间呢，我们可能会遇到一些小小的问题，这里我们可以通过实验

6、来解决。1. 为什么在Viewport的设置参数里面，非要用border？原因很简单，相信做过web设计的人都曾遇到过这样一个问题“为什么要在具体实现左右布局的时候要用到float属性”，这样对比理解就可以了，border布局，实现了部分面板的float属性，使我们的页面显得更为灵活，不至于一片上下，而无左右。朋友们可以使用注释 layout属性的方法来试验一下。2. 为什么我在使用了Border布局之后，出现了”SCRIPT5007: 无法获取属性“flex”的值: 对象为 null 或未定义”的错误?细心的朋友可能会发现了，在使用了border布局之后，必须拥有的一个region为cent

7、er面板，否则就会出现上述错误，哪怕在在viewport的所有属性中最后只有一个center面板，也不会有错误，但若是没有，则肯定会错。这就好像国不可一日无君一样。这里朋友们可以单独对items进行部分注释来进行试验3. 为什么我的文字显示不完整?这不是你的错，只是因为现在的4版本对 IE9的支持上，文字显示就是不全，解决起来也只能是，按F12，打开开发人员工具条，在里面设置 浏览器模式 为 IE8第二部分 Accordion布局通过前面的布局我们把整个页面布局给搭建好了，现在我们需要做的是将 左边的面板填充上一个可折叠的菜单条，在之前，我们先建立一个menu的对象，代码如下： var txt

8、Menu="<ul class='menu'><li>ExtJS简介</li><li>ExtJS预备知识</li><li>UI设计常用组件</li><li>UI设计布局</li><li>行为处理事件机制</li></ul>"var menu=title:"第一天",html:txtMenu,autoWidth : true,align:'center',title:"第三

9、天",title:"第四天",title:"第五天",title:"第六天"这里首先为菜单静态的创建了几个想选项，主要涉及到的构造属性有title以及html，当然还可以加载页面，这里我们简单介绍，那么接下来我们要做的就是要改变westPanel来实现可折叠布局，下面为改变后的代码：这时候我们在运行的时候，就达到了最终的预期效果了:Accordion翻译过来手风琴，联想到他，也不难理解为什么又叫做可折叠布局了。如果想要“按键“更加漂亮的话，可以再通过把iconCls加到我们设置的menu中去，然后通过menu为Ico设置美工样式依旧是老步骤，简单说一个容易出现的问题：为什么我把代码都敲入了，但是没有出现菜单？在其他语言诸如C#等等的朋友容易认为变量的定义前后顺序是没有关系的，因为在他们的编译