序⾔

1、百度百科上说：ExtJs功能丰富，⽆⼈能出其右。⽆论是界⾯之美，还是功能之强，extjs都⾼居榜⾸。 2、呵呵，界⾯之美当是少不了布局的，这篇⽂章我写layout的七种布局。（extjs是4.+版本）

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 将激活折叠功能。

center 区域是必须使⽤的，Center区域会⾃动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，如果没有指定center区域时，会出现报错信息。

Ext.onReady(function () { new Ext.Viewport({ title: \"Viewport\ layout: \"border\ defaults: {

bodyStyle: \"background-color: #FFFFFF;\ frame: true },

items: [

{ region: \"westrue }, { region: \"eastrue }, { region: \"northrue },

{ region: \"centerrue, border: true, collapsible: true,title:'center' },

{ region: \"southrue, border: true, collapsible: true, height: 100 }, ] }); });

Accordion布局__⼿风琴布局

accordion布局：accordion布局也称⼿风琴布局，在accordion布局下，在任何时间⾥，只有⼀个⾯板处于激活状态。其中每个⾯边都⽀持展开和折叠。注意：只有Ext.Panels 和所有Ext.panel.Panel ⼦项，才可以使⽤accordion布局。

Ext.onReady(function () {

var accordion = Ext.create(\"Ext.panel.Panel\ title: \"west\

layout: \"accordion\//设置为⼿风琴布局 layoutConfig: { animate: true },

width: 250, minWidth: 90,

region: \"west\//设置⽅位 split: true,

collapsible: true, items: [

{ title: \"嵌套⾯板⼀\嵌套⾯板⼀\ { title: \"嵌套⾯板⼆\嵌套⾯板⼆\ { title: \"嵌套⾯板三\嵌套⾯板三\ { title: \"嵌套⾯板四\嵌套⾯板四\ ] });

new Ext.Viewport({ title: \"Viewport\

layout: \"border\//这⾥是（border）边界布局 defaults: {

bodyStyle: \"background-color: #FFFFFF;\ frame: true },

items: [

accordion, //这⾥是（accordion）⼿风琴布局

{region: \"eastrue }, { region: \"northrue },

{ region: \"centerrue, border: true, collapsible: true, title: 'center' },

{ region: \"southrue, border: true, collapsible: true, height: 100 } ] }); });

Card布局__类似向导

Card布局：这种布局⽤来管理多个⼦组件，并且在任何时刻只能显⽰⼀个⼦组件。这种布局最常⽤的情况是向导模式，也就是我们所说的分布提交。Card布局可以使⽤layout:'card'来创建。

注意：由于此布局本⾝不提供分步导航功能，所以需要⽤户⾃⼰开发该功能。由于只有⼀个⾯板处于显⽰状态，那么在初始时，我们可以使⽤

setActiveItem功能来指定某⼀个⾯板的显⽰。当要显⽰下⼀个⾯板或者上⼀个⾯板的时候，我们可以使⽤getNext()或getPrev()来得到下⼀个或上⼀个⾯板。然后使⽤setDisabled⽅法来设置⾯板的显⽰。另外，如果⾯板中显⽰的是FORM布局，我们在点击下⼀个⾯板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。

下⾯的⽰例代码展⽰了⼀个基本的Card布局，布局中并没有包含form元素，具体情况，还要根据实际情况进⾏处理：

//Card布局__类似向导 Ext.application({ name: 'HelloExt', launch: function () {

var navigate = function (panel, direction) { var layout = panel.getLayout(); layout[direction]();

Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); Ext.getCmp('move-next').setDisabled(!layout.getNext()); };

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: '上⼀步',

handler: function (btn) {

navigate(btn.up(\"panel\"), \"prev\"); },

disabled: true }, '->', {

id: 'move-next', text: '下⼀步',

handler: function (btn) {

navigate(btn.up(\"panel\"), \"next\"); } }],

items: [{

id: 'card-0',

html: '

第⼀步

id: 'card-1',

html: '

第⼆步

id: 'card-2',

html: '

最后⼀步

renderTo: Ext.getBody() }); }

});

fit 布局

在Fit布局中，⼦元素将⾃动填满整个⽗容器。

注意：在fit布局下，对其⼦元素设置宽度是⽆效的。如果在fit布局中放置了多个组件，则只会显⽰第⼀个⼦元素。典型的案例就是当客户要求⼀个window或panel中放置⼀个GRID组件，grid组件的⼤⼩会随着⽗容器的⼤⼩改变⽽改变。

//fit 布局

Ext.application({ name: 'HelloExt', launch: function () {

Ext.create('Ext.container.Viewport', { layout: 'fit',

width: '800px', //没有做⽤的 items: [ {

title: 'Hello Ext',

html: 'Hello! Welcome to Ext JS.' }, {

title: ' 妈咪妈咪哄 ',

html: '这个⼦控件是不会显⽰的，呜哈哈哈！' } ] }); } });

Anchor布局

anchor布局将使组件固定于⽗容器的某⼀个位置，使⽤anchor布局的⼦组件尺⼨相对于容器的尺⼨，即⽗容器容器的⼤⼩发⽣变化时，使⽤anchor布局的组件会根据规定的规则重新渲染位置和⼤⼩。

AnchorLayout布局没有任何的直接配置选项（继承的除外），然⽽在使⽤AnchorLayout布局时，其⼦组件都有⼀个anchor属性，⽤来配置此⼦组件在⽗容器中所处的位置。

anchor属性为⼀组字符串，可以使⽤百分⽐或者是-数字来表⽰。配置字符串使⽤空格隔开，例如 anchor:'75% 25%'，表⽰宽度为⽗容器的75%，⾼度为⽗容器的25%

anchor:'-295 -300'，表⽰组件相对于⽗容器右边距为295，相对于⽗容器的底部位300 anchor:'-250 10%'，混合模式，表⽰组件党对于如容器右边为250，⾼度为⽗容器的10%

//Anchor布局

Ext.application({ name: 'HelloExt', launch: function () {

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: '-295 -300' }, {

xtype: 'panel',

title: 'Mixed Offset and Percent', anchor: '-250 10%' }] }); } });

Absolute布局

Absolute布局继承Ext.layout.container.Anchor 布局⽅式，并增加了X/Y配置选项对⼦组件进⾏定位，Absolute布局的⽬的是为了扩展布局的属性，使得布局更容易使⽤。

//Absolute布局

Ext.application({ name: \"HelloExt\ launch: function () {

Ext.create('Ext.form.Panel', { title: 'Absolute布局', width: 300, height: 275, x: 200, y: 90,

layout: 'absolute',

defaultType: 'textfield', items: [{ x: 10, y: 10,

xtype: 'label', text: 'Send To:' }, {

x: 80, y: 10, name: 'to',

anchor: '90%' //控件从居左80px处，拉长到居左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% 80%' //控件从居左0px处拉长100%，空间从居上80px处，拉长⾄余下控件⾼度的80%处 }],

renderTo: Ext.getBody() }); } });

Column布局__列布局

Column布局⼀般被称为列布局，这种布局的⽬的是为了创建⼀个多列的格式。其中每列的宽度，可以为其指定⼀个百分⽐或者是⼀个固定的宽度。

Column布局没有直接的配置选项（继承的除外），但Column布局⽀持⼀个columnWidth属性，在布局过程中，使⽤columnWidth指定每个⾯板的宽度。

注意：使⽤Column布局布局时，其⼦⾯板的所有columnWidth值加起来必须介于0~1之间或者是所占百分⽐。他们的总和应该是1。

另外，如果任何⼦⾯板没有指定columnWidth值，那么它将占满剩余的空间。

Ext.application({

name: \"HelloExt\ launch: function () {

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() }); } });