Layout Controls
Auto Layout
Ext JS4中的容器的默认布局是自动布局。这个布局管理器会自动地将组件放在一个容器中。
Fit Layout
Fit布局安排了容器的内容完全占据空间，它适合于容器的大小。Fit布局通常用于具有单个项目的容器。Fit布局是Card布局的基类
1 Ext.onReady(function() {
2 Ext.create("Ext.panel.Panel", {
3 layout: "fit", //fit布局
4 title : "Fit layout panel",
5 height: 400,
6 width: 600,
7 renderTo: "panel",
8 items: [{
9 xtype: "textfield",
10 fieldLabel: "Email"
11 }]
12 });
13 });
Anchor Layout
anchor布局管理器将一个容器的项目与容器的大小相比较。当容器被调整时，anchor布局管理器会重新安排相对于容器的新大小的项目。您可以将anchor属性配置为子项。
您可以在 anchor属性中配置宽度和高度值以及 anchor属性中的偏移值，如下所示。
1 anchor : "width% height%"
2 (or)
3 anchor : "offsetWidth offsetHeight"
您还可以通过指定偏移值和百分比来混合这两个选项。这里有一个简单的面板，它有一个文本框和一个按钮，并配置了一个anchor布局。项目配置了anchor属性。当你点击这个按钮时，面板的宽度和高度会增加5px。
1 Ext.onReady(function() {
2 var panel = Ext.create("Ext.panel.Panel", {
3 layout: "anchor",
4 title : "Anchor layout panel",
5 width: 600,
6 height: 400,
7 items: [{
8 xtype: "textfield",
9 fieldLabel: "Name",
10 anchor: "95% 15%"
11 }, {
12 xtype: "button",
13 text: "Resize",
14 anchor: "-50, 15%",
15 listeners: {
16 "click": function() {
17 panel.setWidth(panel.getWidth() + 5);
18 panel.setHeight(panel.getHeight() + 5);
19 }
20 }
21 }],
22 renderTo: "panel"
23 });
24 });
另一个例子
1 Ext.onReady(function() {
2 var panel1 = new Ext.Panel({
3 title : "Panel1",
4 height : 100,
5 anchor : '-50',
6 html : "高度等于100，宽度=容器宽度-50"
7 });
8 var panel2 = new Ext.Panel({
9 title: "Panel2",
10 height: 100,
11 anchor: '50%',
12 html: "高度等于100,宽度=容器宽度的50%"
13 });
14 var panel3 = new Ext.Panel({
15 title: "Panel3",
16 anchor: '-10, -250',
17 html: "宽度=容器宽度-10,高度=容器高度-250"
18 });
19 var win = new Ext.Window({
20 title: "Anchor Layout",
21 height: 400,
22 width: 400,
23 layout: 'anchor',
24 items: [panel1, panel2, panel3]
25 });
26 win.show();
27 });
Box Layout
Ext.layout.container.Box是VBox和HBox布局的基础类。VBox和HBox分别代表垂直盒和水平盒。
下面显示一个带有三个按钮(A、B和C)的面板。这些按钮是垂直排列在面板的中心
1 Ext.onReady(function() {
2 var panel = Ext.create("Ext.panel.Panel", {
3 title : "VBox layout panel",
4 width: 600,
5 height: 400,
6 layout : {
7 type : "vbox",
8 pack : "center", //水平居中
9 align : "center" //垂直居中
10 },
11 defaults : {
12 xtype : "button",
13 margin: "10"
14 },
15 items: [
16 {text : "A"},
17 {text : "B"},
18 {text : "C"}
19 ],
20 renderTo: "panel"
21 });
22 });
代码可以修改为使用hbox布局。可以修改布局配置，如下所示。
1 Ext.onReady(function() {
2 var panel = Ext.create("Ext.panel.Panel", {
3 title : "VBox layout panel",
4 width: 600,
5 height: 400,
6 layout : {
7 type : "hbox",
8 pack : "center",
9 align : "middle"
10 },
11 defaults : {
12 xtype : "button",
13 margin: "10"
14 },
15 items: [
16 {text : "A"},
17 {text : "B"},
18 {text : "C"}
19 ],
20 renderTo: "panel"
21 });
22 });
Accordion Layout
Accordion布局是VBox布局的扩展。它可以垂直地排列一组面板，以折叠和可扩展的特性。下面显示了使用Accordion布局的面板的代