(九)布局Layout

布局Layout
(1) 布局概述
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext 的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。
ExtJS 的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS 的容器组件包含一个layout 及layoutConfig 配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig 配置，有的则不需要layoutConfig 配置。看代码：
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  width:400,
  height:200,
  layout:"column",
  items:[
   {columnWidth:.5,title:"面板1"},
   {columnWidth:.5,title:"面板2"}
  ]
 });
});

上面的代码我们创建了一个面板Panel，Panle 是一个容器组件，我们使用layout 指定该面板使用Column 布局。该面板的子元素是两个面板，这两个面板都包含了一个与列布局相关的配置参数属性columnWidth，他们的值都是0.5，也就是每一个面板占一半的宽度。
Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。
ExtJS2.0 一共包含十种布局，常用的布局有border、column、fit、form、card、tabel等布局，下面我们分别对这几种布局作简单的介绍。
(2) Border区域布局
Border 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：
Ext.onReady(function(){
 new Ext.Viewport({
  layout:"border",
  items:[{region:"north",
  height:50,
  title:"顶部面板"},
  {region:"south",
  height:50,
  title:"底部面板"},
  {region:"center",
  title:"中央面板"},
  {region:"west",
  width:100,
  title:"左边面板"},
  {region:"east",
  width:100,
  title:"右边面板"}
  ]
 });
});
(3) Column列布局
Column 列布局由Ext.layout.ColumnLayout 类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度，而width 则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  layout:"column",
  width:500,
  height:100,
  items:[{title:"列1",width:100},
  {title:"列2",width:200},
  {title:"列3",width:100},
  {title:"列4"}]
 });
});
<div id="mydiv"></div>
上面的代码在容器组件中放入了四个元素，在容器组件中形成4 列，列的宽度分别为100,200,100 及剩余宽度
也可使用columnWidth 来定义子元素所占的列宽度，看下面的代码：
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  layout:"column",
  width:500,
  height:100,
  items:[{title:"列1",columnWidth:.2},
  {title:"列2",columnWidth:.3},
  {title:"列3",columnWidth:.3},
  {title:"列4",columnWidth:.2}]
 });
});
注意columnWidth 的总和应该为1。
在实际应用中还可以混合使用，看下面的代码：
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  layout:"column",
  width:500,
  height:100,
  items:[
   {title:"列1",width:200},
   {title:"列2",columnWidth:.3},
   {title:"列3",columnWidth:.3},
   {title:"列4",columnWidth:.4}
  ]
 });
});
(4) Fit布局
Fit布局由类Ext.layout.FitLayout定义，名称为fit，用于嵌套布局时使之自适应容器大小，通常用于菜单，表单等的嵌套布局。 Fit布局顾名思义，Fit即“自适应”的意思，通常使用在我们进行嵌套布局的时候使用，例如：窗体里嵌套表单面板等，使用该布局的一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
看使用Fit 布局后的代码
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  layout:"fit",
  width:500,
  height:100,
  items:[{title:"子元素",html:"这是子元素中的内容"}]
 });
});
<div id="mydiv"></div>
上面的代码指定父容器使用Fit 布局，因此子将自动填满整个父容器。
如果容器组件中有多个子元素，则只会显示一个元素。
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  layout:"fit",
  width:500,
  height:100,
  items:[{title:"子元素",html:"这是子元素中的内容"},
  {title:"子元素2",html:"这是子元素2中的内容"}]
 });
});
<div id="mydiv"></div>
如果不使用布局Fit。
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  width:500,
  height:100,
  items:[{title:"子元素",html:"这是子元素中的内容"},
  {title:"子元素2",html:"这是子元素2中的内容"}]
 });
});
<div id="mydiv"></div>
(5) Form布局
Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。看下面的代码：
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  width:300,
  layout:"form",
  hideLabels:false,
  labelAlign:"right",
  height:120,
  defaultType: 'textfield',
  items:[
   {fieldLabel:"请输入姓名",name:"name"},
   {fieldLabel:"请输入地址",name:"address"},
   {fieldLabel:"请输入电话",name:"tel"}
  ]
 });
});
上面的代码创建了一个面板，面板使用Form 布局，面板中包含三个子元素，这些子元素都是文本框字段，在父容器中还通过hideLabels、labelAlign 等配置属性来定义了是否隐藏标签、标签对齐方式等。
可以在容器组件中把hideLabels 设置为true，这样将不会显示容器中字段的标签了。
在实际应用中，Ext.form.FormPanel 这个类默认布局使用的是Form 布局，而且FormPanel还会创建与<form> 标签相关的组件，因此一般情况下我们直接使用FormPanel 即可。
Ext.onReady(function(){
 new Ext.form.FormPanel({
  renderTo:"mydiv",
  title:"容器组件",
  width:300,
  labelAlign:"right",
  height:120,
  defaultType: 'textfield',
  items:[
   {fieldLabel:"请输入姓名",name:"name"},
   {fieldLabel:"请输入地址",name:"address"},
   {fieldLabel:"请输入电话",name:"tel"}
  ]
 });
});
程序结果与前面使用Ext.Panel 并指定form 布局的一样。
(6) Accordion布局
Accordion 布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。来看下面的代码:
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  width:500,
  height:200,
  layout:"accordion",
  layoutConfig: {
  animate: true
  },
  items:[
   {title:"子元素1",html:"这是子元素1中的内容"},
   {title:"子元素2",html:"这是子元素2中的内容"},
   {title:"子元素3",html:"这是子元素3中的内容"}
  ]
 });
});
上面的代码定义了一个容器组件，指定使用Accordion 布局，该容器组件中包含三个子元素，在layoutConfig 中指定布局配置参数animate 为true，表示在执行展开折叠时是否应用动画效果。
(7) Table布局及其它布局
Table 布局由类Ext.layout.TableLayout 定义，名称为table，该布局负责把容器中的子元素按照类似普通html 标签。
Ext.onReady(function(){
 var panel=new Ext.Panel({
  renderTo:"mydiv",
  title:"容器组件",
  width:500,
  height:200,
  layout:"table",
  layoutConfig: {
  columns: 3
  },
  items:[
   {title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
   {title:"子元素2",html:"这是子元素2中的内容",colspan:2},
   {title:"子元素3",html:"这是子元素3中的内容"},
   {title:"子元素4",html:"这是子元素4中的内容"}
  ]
 });
});
上面的代码创建了一个父容器组件，指定使用Table 布局，layoutConfig 使用columns指定父容器分成3 列，子元素中使用rowspan 或colspan 来指定子元素所横跨的单元格数。
除了前面介绍的几种布局以外， Ext2.0 中还包含其它的Ext.layout.AbsoluteLayout、Ext.layout.AnchorLayout 等布局类，这些布局主要作为其它布局的基类使用，一般情况下我们不会在应用中直接使用。另外，我们也可以继承10 种布局类的一种，来实现自定义的布局。