ExtJs 6.0+快速入门之布局详解（Layout）

布局作为最重要的

1.ContainerLayout（默认布局）

这种布局是ExtJs 中默认的布局

这种布局的一般情况是按照从上到下的堆叠的方式进行堆叠的

代码

{
title: 'ContainerLayout(默认布局)',
/**
* layout: 'container',//指定布局为container，这里是可以忽略的值
*/
items: [{
height: 100,
title: '高度50',
}, {
width: 500,
title: '宽度500',
html: '内容'
}, {
title: '宽度200 高度200',
height: 200,
width: 200
}

效果图

2.AnchorLayout（锚定式布局）

AnchorLayout与ContainerLayout类似，相似之处在于它是一个一个的堆叠摆放。不同之处在于可以通过给子元素制定anchor属性，动态实现尺寸的调整。anchor的使用方法如下。

可以使用2种方法进行制定

百分比

百分比指的是占用父控件的长度与宽度

偏移量

偏移量是最难理解的一个部分，比如，我们有一个容器，长度为100px，如果我们指定这个布局下的子控件的宽度偏移量为-20，那么这个子控件的宽度就是80,如图所示‘

代码

{
title: 'AnchorLayout(锚定式布局)',
layout: 'anchor',
scrollable: true,
items: [{
xtype: 'panel',
title: '宽度75% 高度20%',
anchor: '75% 20%'
}, {
xtype: 'panel',
title: '最大宽度-300 高度-400',
anchor: '-300 -400'
}, {
xtype: 'panel',
title: '最大宽度-300 高度20%',
anchor: '-250 20%'
}

效果图

3.FormLayout(表单式布局)

FormLayout 主要用于用户填写的表单，与Anchor Layout相似，同时必须要记住FormLayout 是anchor layout的一个子类，所以同样可以使用anchor 属性及进行动态的调整表单

代码

{
title: 'FormLayout(表单式布局)',
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: '姓',
name: 'first',
allowBlank: false
}, {
fieldLabel: '名',
name: 'last'
}, {
fieldLabel: '公司',
name: 'company'
}, {
fieldLabel: '邮箱',
name: 'email',
vtype: 'email'
}, {
fieldLabel: '生日',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: '年龄',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: '时间',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}]
}

效果图

4.AbsoluteLayout

绝对布局其实没有什么可以讲的，主要是两个属性值，x跟y,x与css属性中的left 一致，y与css属性中top一致，同时还可以设置width，height属性，或者anchor属性。通过这些属性来设置其宽度或者距离right,与bottom的距离，

代码

{
title: 'AbsoluteLayout(绝对布局)',
layout:'absolute',
defaultType:'textfield',
items: [{
x: 10,
y: 10,
xtype: 'label',
text: '收件人:',
allowBlank:false
}, {
x: 80,
y: 10,
name: 'to',
anchor: '90%' // anchor width by percentage
}, {
x: 10,
y: 40,
xtype: 'label',
text: '主题:'
}, {
x: 80,
y: 40,
name: 'subject',
anchor: '90%' // anchor width by percentage
}, {
x: 0,
y: 80,
xtype: 'textareafield',
name: 'msg',
emptyText:'在这里输入信息内容',
anchor: '100% 100%' // anchor width and height
}],
},

效果图

5.Fit layout

Fit ，一看名字就知道很凑合，这是一个宽度与高度都与父容器一致的子控件，相当于anchorlayout中吧anchor设置为anchor:’100% 100%’而且问题是没办法修改的，所以出镜率还是不算很高。

代码

{
title:'FitLayout(适配式布局)',
layout:'fit',
items:{
title:'子面板',
html:'Fit Layout 的主要特性是一个容器只能容得下一个子控件，多余的子控件将被隐藏掉',
frame:true,

}
}

效果图

6.AccordionLayout

层叠式布局与fitlayout类似，它会占用整个父控件的容器，区别在于其可以存放多个控件

{
title:'AccordionLayout(层叠式布局)',
defaults: {
//这个属性会默认的设置到每一个子控件的css属性中
bodyStyle: 'padding:15px'
},
layout: {
type: 'accordion',
},
items: [{
title: '面板1',
html: '我是面板一'
},{
title: '面板2',
html: '我是面板2'
},{
title: '面板3',
html: '我是面板3中的内容'
}]
}

效果图

7.CardLayout

卡片式布局，顾名思义，就是类似一张又一个的卡片

暂时更新至2017年6月11日晚22时