EXT JS6学习笔记(三)
The absolute layout
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'absolute',
items: [{
xtype: 'panel',
title: 'Panel 1',
x: 12,
y: 20,
height: 250,
}, {
xtype: 'panel',
title: 'Panel 2',
x: 200,
y: 150,
height: 200,
}, {
xtype: 'panel',
title: 'Panel 3',
x: 400,
y: 250,
width: 150,
height: 100,
}]
});
});
2. The accordion layout
Ext.onReady(function() {
Ext.create("Ext.panel.Panel", {
title: "Ext.layout.container.Accordion示例",
frame: true,
width: 300,
height: 200,
renderTo: Ext.getBody(),
bodyPadding: 5,
layout: "accordion",
defaults: {
bodyStyle: "background-color:#FFFFFF"
},
items: [{
title: "嵌套面板一",
html: "面板一"
}, {
title: "嵌套面板二",
html: "面板二"
}, {
title: "嵌套面板三",
html: "面板三"
}]
});
3. The border layout
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'border',
items: [{
title: 'Item 1',
html: 'Item 1',
region: 'center',
split: true,
border: true,
collapsible: true
}, {
title: 'Item 2',
html: 'Item 2',
region: 'east',
width: 200,
split: true,
border: true,
collapsible: true
}, {
title: 'Item 2',
html: 'Item 2',
region: 'west',
split: true,
width: 200,
border: true,
collapsible: true
}, {
title: 'Item 2',
split: true,
html: 'Item 2',
region: 'north',
width: 200,
border: true,
collapsible: true
}, {
title: 'Item 3',
html: 'Item 3',
region: 'south',
height: 100,
split: true,
border: true,
collapsible: true
}]
});
});