2.1Auto自动布局[Ext.layout.container.Auto]
组件没有指定任何布局方式的时候Auto布局就是默认的布局方式,他采用最原始的HTML流式排版的布局方式
[
]
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 800,
height: 280,
title: "AutoLayout布局的面板",
layout: 'auto',//设置布局，默认为流式布局
renderTo: 'demo',
items: [{
xtype: 'panel',
title: '第一个面板',
width: '75%', //站总体宽度的75%
height: 90
},{
xtype: 'panel',
title: '第二个面板',
width: '75%',
height: 90
},{
xtype: 'panel',
title: '第三个面板',
width: '99%',
height: 90
}]
});
})
2.2Fit自适应布局[Ext.layout.container.Fit]
他是他的(第一个也是唯一个)子元素填满自身的body
[html]
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 500,
height: 280,
title: "AutoLayout布局的面板",
layout: 'fit',//设置布局，充满面板
renderTo: 'demo',
items: [{
xtype: 'panel',
title: '第一个面板'
},{
xtype: 'panel',
title: '第二个面板'
}]
});
})
2.3Accordion折叠(手风琴)布局[Ext.layout.container.Accordion]
他是初始化多个版面,当一个版面处于打开状态下,其他版面就会处于收起状态
[html]
Ext.QuickTips.init();
Ext.create('Ext.panel.Panel', {
title: 'Accordion布局',
width: 300,
height: 300,
layout:'accordion',//折叠式
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: '面板1'
},{
title: 'Panel 2',
html: '面板2'
},{
title: 'Panel 3',
html: '面板3'
}],
renderTo: 'demo'
});
});
2.4Card卡片布局[Ext.layout.container.Card]
和折叠布局不同之处在于他是自定义按钮来切换
[html]
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.panel.Panel', {
title: 'Accordion布局',
width: 300,
height: 300,
layout:'accordion',//折叠式
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: '面板1'
},{
title: 'Panel 2',
html: '面板2'
},{
title: 'Panel 3',
html: '面板3'
}],
renderTo: 'demo'
});
});
