ExtJs layout布局介绍

ExtJs是一个大而全的框架，页面布局主要使用js来进行控制。为了能更高效方便的进行展示，它提供了auto, border, fit, vbox, hbox, anchor等布局（layout)。

这些布局各有特点，如果使用恰当的话，能够简化开发。但是使用不当，则有可能让你的ExtJs程序出现难以查找的问题。下面分别介绍几个主要的布局方式，以及我使用的过程中遇到的问题。

声明：本文的布局基于ExtJs 4.2

TODO：
[] 添加相应布局的图片展示
[] 添加布局的样例代码

auto 布局

auto是在不对Container设置layout布局时，默认的布局，它只是把对Container布局相关函数的调用，传递到子Container。

PS：

• autocomponent是component的默认布局，它根据component的size model来调用不同的模板函数，来完成对元素的度量，计算和发布。

• size model：控制ExtJs计算组件大小的方式，以及组件覆盖时的处理方式，包含，fixed, natural(使用css）， shrinkWrap, calculated, configured

• fixed : configured or calculated

• natural : shrinkWrap or natural

• configured: configured or constrainedMax or constrainedMin

• calculated: calculatedFromConfigured or calculatedFromNatural or calculatedFromShrinkWrap

border 布局

border布局提供通用的，东西南北中（east west north south center)，5个布局点，除了center是必须的，其他的页面是可选。

• 东西页面必须设定宽度，南北页面必须设定高度
• 一个border layout里面应该只包含一个region为center的组件

fit

fit主要是用来提供给只有一个子页面的情形，例如：一个弹出Window里面有一个Panel展示信息和处理数据。

• fit布局指代的是items内只有一项，但是可以通过dockedItems来丰富界面的展示

vbox, hbox

vbox和hbox分别对应的是box布局的从上到下，和从左到右的方式。

• 他们提供align: 'stretch' 来使得子元素拉伸到容器元素的宽度或者高度，从而提供一种分栏布局。这个很有用。
• vbox和hbox内部的元素使用的是position: absolute，floating属性设置无效，如果强制使用position: floating, 会导致上下元素间的间隔极大。破幻内容展示的形式。

anchor

官方描述：
anchor布局中，子元素可以把自己固定在一个以布局元素维度对应的位置上。如果anchor布局的父元素大小改变，那么子元素大小会随之改变。

使用此布局的容器items可以使用anchor属性来控制自己的绝对大小（使用正数），相对大小（使用百分比）相对对位置（使用负数），对齐方式。并可以混合使用。

• anchor内部的元素使用的是position: relative布局，所以可以使用floating: right, left等

布局的配置方式

layout布局配置是通过layout属性来配置的，可以有以下两种方式：

// 简单方式，使用layout的默认配置
layout: 'fit'

// 针对layout的配置，需要使用如下方式
layout: {
   type: 'vbox',
   align: 'stretch'
}

ExtJs 开发调试技巧

1. 始终打开ExtJs的官方文档页面随时查询，ExtJs的文档很全。如果网速过慢，建议打开ExtJs自带的离线文档查询
2. 尽量减少Component嵌套层级，也即尽量减少layout的嵌套，这样既能提高程序的执行效率，又能减少因为ExtJs布局计算时可能出现的一些诡异错误
3. 注意关注layout嵌套层次上的自适应计算的嵌套方式，如设置flex属性的元素，设置为stretch的boxlayout的对应高度，或者宽度。当使用时，要尽量上下两个层级不都同时动态变化？？ —— 这个观点好像不对。
4. 使用chrome执行ExtJs出现错误时，应该跟踪ExtJs的调用堆栈，并从堆栈上层进入extjs代码，观察是在哪个函数调用出错的。例如：doLayout出错，一般是布局出现错误。知道错误的字段后，再寻找bug就更加方便。此时，我们不需要完全了解ExtJs的代码，只需要知道在哪里出现的错误，这是可以直接看函数名称和函数内部的变量名称就可以得到的。

小结

本文主要介绍我在ExtJs开发过程中使用，了解过的布局，以及在使用中遇到的可能对别人有帮助的东西。希望对你有所帮助。

更详细的介绍可以参考：https://blog.gmem.cc/extjs-4-layouts

谢谢你的阅读！