ExtJs布局大全

1.Fit 布局

　　在Fit 布局中，子元素将自动填满整个父容器。注意：在fit 布局下，对其子元素设置宽度是无效的。如果在fit 布局中放置了多个组件，则只会显示第一个子元素。在Fit 布局中，子元素将自动填满整个父容器。典型的案例就是当客户要求一个window 或panel 中放置一个GRID 组件，grid 组件的大小会随着父容器的大小改变而改变。

效果图：

示例代码：

Ext.create('Ext.container.Viewport', {
　　layout: 'fit',
　　items: [
　　　　{
　　　　　　title: 'Hello Ext',
　　　　　　html : 'Hello! Welcome to Ext JS.'
　　　　}
　]
});

2 Border 布局
　　border 布局：border 布局也称边界布局，他将页面分隔为west,east,south,north,center 这五个部分，我们需要在在其items 中指定使用region 参数为其子元素指定具体位置。注意：north 和south 部分只能设置高度（height），west 和east 部分只能设置宽度（width）。north south west east 区域变大，center 区域就变小了。

参数 split:true 可以调整除了center 四个区域的大小。

参数 collapsible:true 将激活折叠功能，

title 必须设置，因为折叠按钮是出现标题部分的。

center 区域是必须使用的，而且center 区域不允许折叠。Center 区域会自动填充其他区域的剩余空间。尤其在Extjs4.0 中，当指定布局为border 时，没有指定center 区域时，会出现报错信息。

效果图：

示例代码：

Ext.create('Ext.panel.Panel', {
　　width: 1024,
　　height: 720,
　　layout: 'border',
　　items: [{
　　　　region: 'south',
　　　　xtype: 'panel',
　　　　height: 20,
　　　　split: false,
　　　　html: '欢迎登录!',
　　　　margins: '0 5 5 5'
　　},{
　　　　title: 'West Region is collapsible',
　　　　region:'west',
　　　　xtype: 'panel',
　　　　margins: '5 0 0 5',
　　　　width: 200,
　　　　collapsible: true,
　　　　id: 'west-region-container',
　　　　layout: 'fit'
　　},{
　　　　title: 'Center Region',
　　　　region: 'center',
　　　　xtype: 'panel',
　　　　layout: 'fit',
　　　　margins: '5 5 0 0',
　　　　html:'在Extjs4中，center区域必须指定，否则会报错。'
　　}],
　　renderTo: Ext.getBody()
});

3 Accordion 布局

　　accordion 布局：accordion 布局也称手风琴布局，在accordion 布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意：只有Ext.Panels和所有Ext.panel.Panel 子项，才可以使用accordion 布局。

效果图：

示例代码：

Ext.create('Ext.panel.Panel', {
　　title: 'Accordion Layout',
　　width: 300,
　　height: 300,
　　x:20,
　　y:20,
　　layout:'accordion',
　　defaults: {
　　　　bodyStyle: 'padding:15px'
　　},
　　layoutConfig: {
　　　　titleCollapse: false,
　　　　animate: true,
　　　　activeOnTop: true
　　},
　　items: [{
　　　　title: 'Panel 1',
　　　　html: 'Panel content!'
　　},{
　　　　title: 'Panel 2',
　　　　html: 'Panel content!'
　　},{
　　　　title: 'Panel 3',
　　　　html: 'Panel content!'
　　}],
　　renderTo: Ext.getBody()
});

4 Card 布局

Card 布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card 布局可以使用layout:'card'来创建。注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem 功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled 方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX 将表单中的内容保存到数据库中或者SESSION 中。
下面的示例代码展示了一个基本的Card 布局，布局中并没有包含form元素，具体情况，还要根据实际情况进行处理：

效果图：

实例代码：

Ext.create('Ext.panel.Panel', {
　　title: 'Card布局示例',
　　width: 300,
　　height: 202,
　　layout: 'card',
　　activeItem: 0,
　　x:30,
　　y:60,
　　bodyStyle: 'padding:15px',
　　defaults: {border: false},
　　bbar: [{
　　　　id: 'move-prev',
　　　　text: 'Back',
　　　　handler: function(btn) {
　　　　　　navigate(btn.up("panel"), "prev");
　　　　},
　　　　disabled: true
　　},
　　'->',
　　{
　　　　id: 'move-next',
　　　　text: 'Next',
　　　　handler: function(btn) {
　　　　　　navigate(btn.up("panel"), "next");
　　　　}
　　}],
　　items: [{
　　　　id: 'card-0',
　　　　html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
　　},
　　{
　　　　id: 'card-1',
　　　　html: '<p>Step 2 of 3</p>'
　　},
　　{
　　　　id: 'card-2',
　　　　html: '<h1>Congratulations!</h1><p>Step 3 of 3 -
　　　　Complete</p>'
　　}],
　　renderTo: Ext.getBody()
});

5 Anchor 布局

anchor 布局将使组件固定于父容器的某一个位置，使用anchor 布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor 布局的组件会根据规定的规
则重新渲染位置和大小。AnchorLayout 布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout 布局时，其子组件都有一个anchor 属性，用来配置此子组件在父容器中所处的位置。anchor 属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如
　　anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%
　　anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200
　　anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的　　20%

效果图：

示例代码：

Ext.create('Ext.Panel', {
　　width: 500,
　　height: 400,
　　title: "Anchor布局",
　　layout: 'anchor',
　　x:60,
　　y:80,
　　renderTo: Ext.getBody(),
　　items: [{
　　　　xtype: 'panel',
　　　　title: '75% Width and 25% Height',
　　　　anchor: '75% 25%'
　　},{
　　　　xtype: 'panel',
　　　　title: 'Offset -300 Width & -200 Height',
　　　anchor: '-300 -200'
　　},{
　　　　xtype: 'panel',
　　　　title: 'Mixed Offset and Percent',
　　　　anchor: '-250 30%'
　　}]
});

6.Absolute 布局

Absolute 布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y（横纵坐标） 配置选项对子组件进行定位，Absolute 布局的目的是为了扩展布局的属性，使得布局更容易使用。

效果图：

示例代码：

Ext.create('Ext.form.Panel', {
　　title: 'Absolute布局',
　　width: 300,
　　height: 275,
　　x:20,
　　y:90,
　　layout:'absolute',
　　defaultType: 'textfield',
　　items: [{
　　　　x: 10,
　　　　y: 10,
　　　　xtype:'label',
　　　　text: 'Send To:'
　　},{
　　　　x: 80,
　　　　y: 10,
　　　　name: 'to',
　　　　anchor:'90%'
　　},{
　　　　x: 10,
　　　　y: 40,
　　　　xtype:'label',
　　　　text: 'Subject:'
　　},{
　　　　x: 80,
　　　　y: 40,
　　　　name: 'subject',
　　　　anchor: '90%'
　　},{
　　　　x:0,
　　　　y: 80,
　　　　xtype: 'textareafield',
　　　　name: 'msg',
　　　　anchor: '100% 100%'
　　}],
　　renderTo: Ext.getBody()
});

7 Column 布局Column 布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。Column 布局没有直接的配置选项（继承的除外），但Column 布局支持一个columnWidth 属性，在布局过程中，使用columnWidth 指定每个面板的宽度。注意：使用Column 布局布局时，其子面板的所有columnWidth 值加起来必须介于0~1 之间或者是所占百分比。他们的总和应该是1。另外，如果任何子面板没有指定columnWidth 值，那么它将占满剩余的空间。

效果图：

示例代码：

Ext.create('Ext.panel.Panel', {
　　title: 'Column Layout - 按比例',
　　width: 350,
　　height: 250,
　　x:20,
　　y:100,
　　layout:'column',
　　items: [{
　　　　title: 'Column 1',
　　　　columnWidth: .25
　　},{
　　　　title: 'Column 2',
　　　　columnWidth: .55
　　},{
　　　　title: 'Column 3',
　　　　columnWidth: .20
　　}],
　　renderTo: Ext.getBody()
});