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

布局作为最重要的

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

代码

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

效果图

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%"
}

效果图

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"
}]
}

效果图

绝对布局其实没有什么可以讲的，主要是两个属性值，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
}],
},

效果图

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

代码

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

}
}

效果图

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

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

效果图

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

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