容器中可以放多个组件，甚至可以放其他容器
布局负责帮助容器，管理其中的组件。
容器中的layout选项（属性）用于控制容器的布局。
1.垂直布局与水平布局
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: '布局的演示',
width: 600,
height: 400,
items: [
//window中的布局，默认垂直布局
//第一个组件
{
fieldLabel: '作者',
xtype: 'textfield'
},
//第二个组件
{
fieldLabel: '出版社',
xtype: 'textfield'
},
//第三个组件 没有xtype，默认panel
{
//panel中的布局，显式指定水平布局
title: '时间',
layout: 'hbox',
height: 80,
items: [{
fieldLabel: '开始日期',
xtype: 'datefield'
}, {
fieldLabel: '结束日期',
xtype: 'datefield'
}
]
}
]
}).show();
});2.Resizer改变上下左右大小
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: '布局的演示：Resizer ',
width: 600,
height: 400,
items: [
//window中的布局，默认垂直布局
//第一个组件
{
id : 'author',
fieldLabel: '作者',
xtype: 'textfield'
},
//第二个组件
{
id: 'addr',
fieldLabel: '出版社',
xtype: 'textfield'
},
//第三个组件 没有xtype，默认panel
{
//panel中的布局，显式指定水平布局
title: '时间',
layout: 'hbox',
height: 80,
items: [{
fieldLabel: '开始日期',
xtype: 'datefield'
}, {
fieldLabel: '结束日期',
xtype: 'datefield'
}
],
//第三个组件的resize
resizable:{
handles:'n s w', //哪些方向可以拉伸
minWidth:200,
minHeight:100
}
}
]
}).show();
Ext.create('Ext.resizer.Resizer',{
el: 'author',
handles :'all'
});
});3.Splitter分割布局
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
title: '布局的演示：Splitter ',
width: 600,
height: 400,
renderTo:Ext.getBody(),
layout:{
type:'hbox',
align:'center'
},
items: [
//第一个组件 没有xtype 默认为panel
{
title:'第一个panel',
height:'100%',
flex:2 //比例
},
// splitter
{
xtype:'splitter',
},
//第二个组件 没有xtype 默认为panel
{
title:'第二个panel',
height:'100%',
flex:3 //比例
},
// splitter
{
xtype:'splitter',
},
//第三个组件 没有xtype 默认为panel
{
title:'第三个panel',
height:'100%',
flex:4 //比例
}
]
});
});
4.Accordion折叠布局
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
title: '布局的演示：Accordion ',
width: 600,
height: 400,
renderTo:Ext.getBody(),
layout:'accordion',
items: [
//第一个组件 没有xtype 默认为panel
{
title:'第一个panel',
},
//第二个组件 没有xtype 默认为panel
{
title:'第二个panel',
},
//第三个组件 没有xtype 默认为panel
{
title:'第三个panel',
}
]
});
});5.Border布局（把panel分割成5个部分）
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
title: '布局的演示：border ',
width: 600,
height: 500,
renderTo:Ext.getBody(),
layout:'border',
items: [
//第一个组件 没有xtype 默认为panel
{
title:'上侧panel',
height:100,
region :'north'
},
//第二个组件 没有xtype 默认为panel
{
title:'左侧panel',
width:80,
split:true,
region :'west'
},
//第三个组件 没有xtype 默认为panel
{
title:'中央panel',
region :'center'
},
//第四个组件 没有xtype 默认为panel
{
title:'左侧panel',
width:80,
region :'east'
},
//第五个组件 没有xtype 默认为panel
{
title:'下侧panel',
height:100,
collapsible:true,
region :'south'
},
]
});
});
