Ext.js 绝对布局
absolute<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'absolute' ,
items: [{
title: 'Panel 1',
x: 50,
y: 50,
html: 'Positioned at x:50, y:50',
width: 500,
height: 100
},{
title: 'Panel 2',
x: 100,
y: 95,
html: 'Positioned at x:100, y:95',
width: 500,
height: 100
}]
});
});
</script>
</head>
<body>
</body>
</html>运行效果：
Ext.js accordion布局
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo : Ext.getBody(),
layout : 'accordion' ,
width : 600,
items : [{
title : 'Panel 1',
html : 'Panel 1 html content'
},{
title : 'Panel 2',
html : 'Panel 2 html content'
},{
title : 'Panel 3',
html : 'Panel 3 html content'
},{
title : 'Panel 4',
html : 'Panel 4 html content'
},{
title : 'Panel 5',
html : 'Panel 5 html content'
}]
});
});
</script>
</head>
<body>
</body>
</html>运行效果：
Ext.js
anchor 布局<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo : Ext.getBody(),
layout : 'anchor' ,
width : 600,
items : [{
title : 'Panel 1',
html : 'panel 1',
height : 100,
anchor : '50%'
},{
title : 'Panel 2',
html : 'panel 2',
height : 100,
anchor : '100%'
},{
title : 'Panel 3',
html : 'panel 3',
height : 100,
anchor : '-100'
},{
title : 'Panel 4',
html : 'panel 4',
anchor : '-70, 500'
}]
});
});
</script>
</head>
<body>
</body>
</html>运行效果：
Ext.js
border布局<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: 600,
layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Panel1',
region:'west',
html: 'This is Panel 1'
},{
title: 'Panel2',
region:'center',
html: 'This is Panel 2'
},{
title: 'Panel3',
region: 'south',
html: 'This is Panel 3'
},{
title: 'Panel4',
region: 'east',
html: 'This is Panel 4'
},{
title: 'Panel5',
region: 'north',
html: 'This is Panel 5'
}]
});
});
</script>
</head>
<body>
</body>
</html>运行效果：
此布局以制表符方式排列不同的组件。 选项卡将显示在容器的顶部。每次只有一个选项卡可见，每个选项卡被视为不同的组件
<!DOCTYPE HTML>
<html>
<head>
<title>absoluteHtmlTest</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.tab.Panel',{
renderTo:Ext.getBody(),
requires:['Ext.layout.container.Card'],
width:600,
height:200,
items:[{
title:'tab panel 1',
html:'tab panel 1 content'
},{
title:'tab panel 2',
html:'tab panel 2 content'
},{
title:'tab panel 3',
html:'tab panel 3 content'
}]
});
});
</script>
</head>
<body>
</body>
</html>效果如下：
在这个布局中，每次元素来到完整的容器空间。 向导中将有一个底部工具栏用于导航。
<!DOCTYPE HTML>
<html>
<head>
<title>absoluteHtmlTest</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
width:600,
height:200,
//勿忘layout布局属性
layout: 'card',
requires:['Ext.layout.container.Card'],
bodyPadding:15,
defaults:{
//隐藏内边框
border:false
},
defaultListenerScope:true,
//在bbar表示按钮，属性添加'->'可以让 previous和next按钮居右，必须是‘->’其他符号无效
bbar:['->',{
itemId:'card-prev',
text:'<< Previous',
handler:'showPrevious',
disabled:true
},{
itemId:'card-next',
text:'next >>',
handler:'showNext'
}],
items:[{
id:'card0',
html:'<h2> This is card wizard layout </h2><p> This is first card </p> <p> Please click the "Previous" button for previous card... </p>'
},{
id:'card1',
html:'<p> This is second card </p> <p> Please click the "Previous" button for previous card... </p>'
},{
id:'card2',
html:'<p> This is 3 card </p> <p> Please click the "Previous" button for previous card... </p>'
},{
id:'card3',
html:'<p> This is 4 card </p> <p> Please click the "Previous" button for previous card... </p>'
}],
showNext:function(){
this.cardPanelNavigation(1);
},
showPrevious:function(){
this.cardPanelNavigation(-1);
},
cardPanelNavigation:function(incr){
var me=this;
var l=me.getLayout();
var i=l.activeItem.id.split('card')[1];
var next=parseInt(i,10)+incr;
l.setActiveItem(next);
me.down('#card-prev').setDisabled(next===0);
me.down('#card-next').setDisabled(next===2);
}
});
});
</script>
</head>
<body>
</body>
</html>效果如下：
| Column 此布局是要在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。 每个column的高度会根据内容的高度自动变化 |
<!DOCTYPE HTML>
<html>
<head>
<title>absoluteHtmlTest</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
//一般只需要layout属性就可以,requires和xtype不是必须的
layout:'column',
requires:['Ext.layout.container.Column'],
xtype:'layout-column',
width:600,
items:[{
title : 'First Component width 30%',
html:'<p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p>',
//columnWidth字段不要写错，否则会出现填充不满的情况
columnWidth:0.30
},{
title : 'Second Component width 40%',
html : '<p> This is Second Component </p> <p> Next line for second component </p>',
columnWidth : 0.40
},{
title : 'Third Component width 30%',
html : 'This is Third Component' ,
columnWidth : 0.30
}]
});
});
</script>
</head>
<body>
</body>
</html>运行结果：
在此布局中，容器用单个面板填充，并且当没有与布局相关的特定要求时，则使用该布局。
适合：在此布局中，容器用单个面板填充，当没有与布局相关的特定要求时，则使用此布局。
<!DOCTYPE HTML>
<html>
<head>
<title>absoluteHtmlTest</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.container.Container',{
renderTo:Ext.getBody(),
layout:{
//fit和auto布局看着是一样的,即使不加layout，区别？？？
type:'fit'
},
defaults:{
bodyPadding:15
},
width:600,
items:[{
title:'panel 1',
html:'panel 1 content'
},{title:'panel 2',
html:'panel 2 content'
},{
title:'panel 3',
html:'panel 3 content'
}]
});
});
</script>
</head>
<body>
</body>
</html>运行效果：
由于名称意味着此布局以HTML表格式在容器中排列组件。
若columns的数值大于item的数量，则item会自动向下排列，还是分三列
情况一：columns和items数量一致
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.container.Container',{
renderTo:Ext.getBody(),
layout:{
type:'table',
columns:3,
tableAttrs:{
style:{
width:'100%'
}
}
},
width:600,
height:200,
items:[{
title:'panel 1',
html:'panel 1 content'
},{
title:'panel 2',
html:'panel 2 content'
},{
title:'panel 3',
html:'panel 3 content'
}]
});
});
</script>
</head>
<body>
</body>
</html>运行结果：
情况2:colums数量小于items数量
运行结果：
带有colspan和rowspan的table布局：
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.container.Container',{
renderTo:Ext.getBody(),
layout:{
type:'table',
columns:3,
tableAttrs:{
style:{
width:'100%'
}
}
},
width:600,
height:200,
items:[{
title:'panel 1',
html:'panel 1 content',
colspan:2
},{
title:'panel 2',
html:'panel 2 content',
rowspan:2
},{
title:'panel 3',
html:'panel 3 content'
},{
title:'panel 4',
html:'panel 4 content'
},{
title:'panel 5',
html:'panel 5 content'
}]
});
});
</script>
</head>
<body>
</body>
</html>运行结果：
Ext.js vbox布局
vbox：这种布局允许元素以垂直方式分布。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
layout:{
type:'vbox',
//stretch伸展
align:'stretch'
},
requires:['Ext.layout.container.VBox'],
xtype:'layout-vertical-box',
width:600,
height:400,
frame:true,
items:[{
title:'panel 1',
html:'panel 1 content',
margin: '0 0 10 0',
//在vbox中flex控制向下拉伸的宽度
flex:1
},{
title:'panel 2',
html:'panel 2 content',
margin: '0 0 10 0',
flex:2
},{
title:'panel 3',
html:'panel 3 content',
margin: '0 0 10 0',
flex:2
},{
title:'panel 4',
html:'panel 4 content',
margin: '0 0 10 0',
flex:1
}]
});
});
</script>
</head>
<body>
</body>
</html>运行效果：
Ext.js hbox布局
hbox：这种布局允许元素以水平方式分布。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
layout : {
type :'hbox'
},
requires: ['Ext.layout.container.HBox'],
xtype: 'layout-horizontal-box',
width : 600,
frame :true,
items : [{
title: 'Panel 1',
html : 'Panel with flex 1',
flex : 1
},{
title: 'Panel 2',
html : 'Panel with flex 2',
flex : 2
},{
title: 'Panel 3',
width: 150,
html : 'Panel with width 150'
},{
title: 'Panel 4',
html : 'Panel with flex 1',
flex : 1
}]
});
});
</script>
</head>
<body>
</body>
</html>运行效果：
