所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持而局操作,每一个容器都会有一个对应的布局,布局负责管理容器组件中子元素的排列、组合及渲染方式等。
        ExtJS的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS的容器组件包含一个layout及 layoutConfig配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息,如果没有指定容器组件的layout则默认会使用 ContainerLayout作为布局,该布局只是简单的把元素放到容器中,有的布局需要layoutConfig配置,有的则不需要 layoutConfig配置。看代码:

Ext.onReady(function(){	
	new Ext.Panel({
		renderTo:"hello",
		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等布局,下面我们分别对这几种布局作简单的介绍。

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:"右边面板"}

]

}); 


});

    执行上面的代码将会在页面中输出包含上下左右中五个区域的面板,如下图所示:



       Column列布局由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素 的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽 度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

layout:"column",

width:500,

height:100,

items:[{title:"列1",width:100},

{title:"列2",width:200},

{title:"列3",width:100},

{title:"列4"}

]

}

);

});

    上面的代码在容器组件中放入了四个元素,在容器组件中形成4列,列的宽度分别为100,200,100及剩余宽度,执行结果如下图所示。

        也可使用columnWidth来定义子元素所占的列宽度,看下面的代码:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

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:"hello",

title:"容器组件",

layout:"column",

width:500,

height:100,

items:[{title:"列1",width:200},

{title:"列2",columnWidth:.3},

{title:"列3",columnWidth:.3},

{title:"列4",columnWidth:.4}

]

}

);

});

    执行上面的代码将会生成如下图所示的结果:

 

Fit布局

    Column列布局由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素 的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽 度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:

Ext.onReady(function(){	
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"column",
		width:500,
		height:100,
		items:[{title:"列1",width:100},
		       {title:"列2",width:200},
			   {title:"列3",width:100},
			   {title:"列4"}
		]
	}
	);
	 });

 

        上面的代码在容器组件中放入了四个元素,在容器组件中形成4列,列的宽度分别为100,200,100及剩余宽度,执行结果如下图所示。

        再看使用Fit布局后的代码,如下:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

layout:"fit",

width:500,

height:100,

items:[{title:"子元素",html:"这是子元素中的内容"}

]

}

);

});

        上面的代码指定父容器使用Fit布局,因此子将自动填满整个父容器。输出的图形如下:

        如果容器组件中有多个子元素,则只会显示一个元素,如下面的代码:

 

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

layout:"fit",

width:500,

height:100,

items:[{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"}

]

}

);

});

        输出的结果如下:

        如果不使用布局Fit,代码如下:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

width:500,

height:120,

items:[{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"}

]

}

);

});

        输出的结果如下图所示:

 

Form布局

       Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。看下面的代码:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

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还会创建与

标签相关的组件,因此一般情况下我们直接使用FormPanel即可。上面的例子可改写成如下的形式:

Ext.onReady(function(){ 

new Ext.form.FormPanel({

renderTo:"hello",

title:"容器组件",

width:300, 

labelAlign:"right",

height:120,

defaultType: 'textfield',

items:[

{fieldLabel:"请输入姓名",name:"name"},

{fieldLabel:"请输入地址",name:"address"},

{fieldLabel:"请输入电话",name:"tel"}

]

}

);

});

         程序结果与前面使用Ext.Panel并指定form布局的一样,如下图所示:

 

Accordion布局

   Accordion布局由类Ext.layout.Accordion定义,名称为accordion,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式。来看下面的代码:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

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,表示在执行展开折叠时是否应用动画效果。执行结果将生成如下图所示的界面:

        点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板,如下图:

 

Card布局

       Card布局由Ext.layout.CardLayout类定义,名称为card,该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码:

Ext.onReady(function(){ 

var panel=new Ext.Panel({

renderTo:"hello",

title:"容器组件",

width:500,

height:200,

layout:"card",

activeItem: 0,

layoutConfig: {

animate: true 

},

items:[{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"},

{title:"子元素3",html:"这是子元素3中的内容"}

],

buttons:[{text:"切换",handler:changeTab}]

}

);

var i=1;

function changeTab()

{ 

panel.getLayout().setActiveItem(i++); 

if(i>2)i=0;

}

});

        上面的代码创建了一个容器组件面板,面板中包含三个子面板元素,父容器包含一个“切换”按钮,点击该按钮将会执行changeTab函数,该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示:

点击一下“切换”按钮,结果如下图所示:

 

table布局及其它布局

    Table布局由类Ext.layout.TableLayout定义,名称为table,该布局负责把容器中的子元素按照类似普通html标签

Ext.onReady(function(){ 

var panel=new Ext.Panel({

renderTo:"hello",

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种布局类的一种,来实现自定义的布局。