这篇博客详细介绍了ExtJS的五种布局方式：Border、Column、Fit、Table和Form布局。通过实例代码展示了各种布局的使用方法和效果，包括如何实现多列、自适应、表格和表单元素的布局。最后总结了每种布局的应用场景，如Border布局通常用于页面整体，Fit布局适合完全填充父容器，Column布局用于多列，Form布局专为表单设计，Table布局适用于复杂多行多列情况。
Ext布局总的来说是很灵活的，因此我觉得有必要一块探讨一下。
Ext常用的布局都在Ext.layout下，这里几乎涵盖了所有的布局方式（但是值得注意的是通常我们不是直接通过"new"来创建这些类的对象然后往里面添加控件使用，而是作为控件一个配置属性使用让Ext自动创建对应的类），满足开发者需求。那么我们就其中常用的方式逐一介绍。
Border布局
Border布局是Ext中常用布局方式（经常用到整个页面的总体布局），感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort，它是对于浏览器视窗的抽象，你可以将它理解为浏览器的可见区域，它将渲染到document.body并自动调整大小，一个页面只能创建一个Viewport。
上面的代码很简单，首先Viewport将自动占满整个窗口，然后我们在Viewport中使用border布局（就是上面的layout:'border'）。Border布局的用法就是对于其子容器使用region来指示子容器所处的位置（例如上面region:'center'），之后子容器就会显示在其父所在容器的相应位置，这些位置是固定的只有上面我们列出的五个。但是请注意这五个部分不是必须都有的，但是至少要包含"center"（因为它是主体，没有主体如何放内容啊）。
效果：
上面的效果看起来不是太好看，而且我们上面说通常情况下我们没有必要五个部分都有的，那么我们稍微修改一下：
效果：
还不错吧！
Column布局
从字面就知道Column布局就是列布局，例如我一个panel中还有两个子panel现在想要左侧显示一个右侧显示一个怎么办？这是可以选择Column将父Panel分为两列，左侧一个右侧一个。
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
