extjs中的flex_Extjs4中的布局

布局用于定义容器如何组织内部子元素和控制子元素的大小。在一个应用程序中，作为定义容器的组织形式，布局是一个十分重要的组件。是显示单个子元素？还是垂直或水平显示多个子元素？这些均由布局来定义。并且布局将占用应用程序大部分的呈现时间。Extjs4中对布局进行了重大的修整。下面我们将学习并熟悉Extjs中的布局。

本章目录如下：

3.1. Extjs 4 布局

Extjs4对布局进行了重大的修整。布局引擎已被重写，但API仍保持原样，从而使得布局是向后兼容的。当然所生成的HTML标签也作出了修整。

Extjs2中引入了布局这一特性。当时其具有良好的性能和速度，但欠缺灵活性。后来的版本增强了灵活性却牺牲了性能(译者语：Extjs3在性能方面确实令不少人望而却步啊！)。在Extjs4中对加载速度、性能和灵活性等方面都作出了改进，通过下面的图例我们可以看到改进结果：

除了上述内容，Extjs4还引入两类型的布局：Container 布局 和 Component 布局。

Component 布局：负责组织组件的HTML元素；

包括：Dock布局、Toolbar布局、Field布局、TriggerField布局。

Container 布局：负责容器内容Extjs元素和调整Extjs元素的大小。

包括：Border布局、Box布局、Fit布局等等。

(译者语：如果接触过Extjs旧有版本的朋友应该对Container布局不陌生了，而Component布局是Extjs4独有的，但不由开发人员来设置、调用，而是框架中的组件已内置好的。)

3.2. Container布局

首先我们来看看Container布局的层级图吧！

3.2.1. Auto布局

当没有为容器(Container或其子类实例)配置layout配置项时就会使用Auto布局。

特点：

1. 容器子元素不随容器大小变化而变化；

2. 容器子元素按添加到容器的顺序自上而下排列。

实例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'Panel 1',

height: 60,

width: 100

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: 'Panel 2',

height: 80,

width: 60

});

var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: 'Panel 3',

height: 65,

width: 100

});

var panel4 = Ext.create('Ext.panel.Panel', {

title: 'Panel 4',

html: 'Panel 4',

height: 70,

width: '90%'

});

var auto = Ext.create('Ext.window.Window', {

title: 'Auto Layout',

width: 100,

height: 320,

//layout:'auto',

defaults: {

bodyStyle: 'padding:15px'

},

items: [panel1, panel2, panel3, panel4]

});

上述实例创建了四个panel组件实例并作为window组件实例的子元素。

defaults：用于统一设置其子元素的配置项。

结果如下：

1. 如果我们放大或缩小window组件实例，其内部的Panel1、Panel2、Panel3和Panel4的大小将不会随之变化；

2. Panel4中width值为90%表示该元素的宽度为父容器body宽度的90%。(在Chrome中使用百分比来设置宽度会出现没有右边框的异常)

3.2.2. Anchor布局

特点：

1. 容器子元素会随容器大小而变化；

2. 子元素按添加到容器的次序，自上而下的排列;

3. 子元素默认宽度为容器的body宽度。

4. 通过子元素的x、y配置项可设置子元素离原来位置的左边距和上边距(效果如同position:relative,top:...,left:....)

实例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: '100% 30%',

anchor:'100% 30%'

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: '80% 25%',

anchor:'80% 25%'

});

var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: '-70 20%',

anchor:'-70 20%'

});

var panel4 = Ext.create('Ext.panel.Panel', {

title: 'Panel 4',

html: '-30 25%',

anchor:'-30 25%'

});

var anchor = Ext.create('Ext.window.Window', {

title: 'Anchor Layout',

width: 250,

height:300,

layout:'anchor',

defaults: {

bodyStyle: 'padding:10px'

},

items: [panel1, panel2, panel3, panel4]

});

anchor.show();

从实例我们可以知道，除了容器的layout配置项设为anchor后，若要定制子元素的布局细节就必须设置设置子元素的anchor配置项。(Ext.panel.Panel中有anchorSize这一配置项，但与布局中上述的anchor配置项功能不同，无法实现上述效果)

anchor值为字符串，若形如"80"、"-30"或"80%"表示设置子元素占容器的宽度；而形如"80 90"或"90 80%"等表示设置子元素占容器的宽度和高度。

80等正数表示子元素离父容器左内边框、上内边框的距离；

-30等负数表示子元素离父容器右内边框、下内边框的距离；

80%等百分数表示子元素占父容器宽度、高度的百分比。注意：对于高度使用百分比值时，每个子元素的最终的值都是“百分比*父容器的高度”。

改变容器大小后

3.2.3. Absolute布局

AbsoluteLayout是AnchorLayout的子类，其继承了AnchoreLayout的所有特性。并且可以设置x和y配置项来相对与父容器来定位子元素。

特点：

1. 容器子元素会随容器大小而变化；

2. 子元素默认宽度为容器的body宽度；

3. 子元素默认位置为容器的左上角(x:0,y:0)，就是不设置各子元素的x、y配置项时，所有子元素会在容器的左上角重叠；

4. 子元素通过x、y配置项来设置子元素离容器左内边框、上内边框的距离。

实例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'x: 10; y: 10 - anchor: 80% 80%', /*this config option will display the given text inside the panel*/

anchor:'80% 80%',

x: 10,

y: 10

});

var absolute = Ext.create('Ext.window.Window', {

title: 'Absolute Layout',

width: 300,

height: 200,

layout:'absolute',

defaults: {

bodyStyle: 'padding:10px'

},

items: [panel1]

});

absolute.show();

注意：子元素的anchor属性，对于高度使用百分比值时，每个子元素的最终的值都是“百分比*父容器的剩余高度”，父容器的剩余高度=父容器的高度-较早添加到容器的子元素高度。所以子元素添加到容器的次序将在使用百分比设置子元素anchor属性高度时起作用。

3.2.4. HBox 布局

HBox布局组织子元素在容器内水平排列。

特点：

1. 容器子元素会随容器大小而变化；

2. 通过三个可选的配置项来组织子元