本文共 657 字，大约阅读时间需要 2 分钟。

       ExtJs 是一个重量级前端开发框架（库），个人认为ExtJs跟Jquery相比优势在于其丰富的控件及一致的界面风格及操作体验，而Jquery擅长DOM的操作及事件处理，二者各有千秋。这一个章节我学习了一下ExtJs的界面布局，搭建了一个常见的“东西南北中”中形式的布局，通过这种布局我们理解下ExtJs对象的定义，使用方式及一些常见的属性的意义及设置方式。

      下面是页面的代码（这是一个完整的页面代码，因为我开始总是找不到完整的页面代码，总是不确定Js代码在页面中的位置。）

@{    Layout = null;}            
           

       这个代码是根据网上的一些代码进行了一些优化。ViewPort里面包含了东南西北中五个对象，其中左侧的west对象包含了三个手风琴形式的左侧菜单。这里可以看出ExtJs的组件的嵌套使用情况。另外还可以看出ExtJs 组件采用 new 关键字来创建对象，采用{}的形式来配置对象的属性。当一个对象包含多个子对象的时候，使用items属性来关联到子对象的数组，Javascript中使用[]来表示数组。上述代码引用的是ExtJs3.2库，由于比较老，新的ExtJs4可能定义方式不太一样。

       运行结果如下：

这个界面布局支持左右上下拖动各个区域大小，同时支持折叠。下面介绍下这些是如何配置的。

split: true 支持拖放各个区域大小。collapsible: true 支持折叠 layout: "accordion" 手风琴形式折叠菜单。