布局是元素在容器中排列的方式。 这可以是水平的,垂直的或任何其他。 Ext JS在其库中定义了不同的布局,但我们也可以编写自定义布局。
编号 | 布局和描述 |
---|---|
1 | Absolute 此布局允许使用容器中的XY坐标定位项目。 |
2 | Accordion 此布局允许将所有项目以堆栈方式(一个在另一个之上)放在容器内。 |
3 | Anchor 此布局为用户提供了相对于容器大小给出每个元素的大小的特权。 |
4 | Border 在此布局中,各种面板嵌套并由边界分隔。 |
5 | Auto 这是默认布局决定元素的布局,基于元素的数量。 |
6 | Card(TabPanel) 此布局以制表符方式排列不同的组件。 选项卡将显示在容器的顶部。每次只有一个选项卡可见,每个选项卡被视为不同的组件。 |
7 | Card(Wizard) 在这个布局中,每次元素来到完整的容器空间。 向导中将有一个底部工具栏用于导航。 |
8 | Column 此布局是要在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。 |
9 | Fit 在此布局中,容器用单个面板填充,并且当没有与布局相关的特定要求时,则使用该布局。 |
10 | Table 由于名称意味着此布局以HTML表格式在容器中排列组件。 |
11 | vBox 这种布局允许元素以垂直方式分布。 这是最常用的布局之一。 |
12 | hBox 这种布局允许元素以水平方式分布。 |
1.Ext.js 绝对布局
描述
绝对:此布局允许使用容器中的XY坐标定位项目。
语法
这里是使用绝对布局的简单语法
layout: '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>
这将产生以下结果
2.Ext.js 手风琴布局
描述
手风琴:这种布局允许将所有项目以堆叠方式(一个在另一个之上)放在容器内。
语法
这里是使用手风琴布局的简单语法:
layout: 'accordion'
例
以下是一个简单的示例,显示了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>
这将产生以下结果
3.Ext.js 锚点布局
描述
锚点:此布局给予用户给出每个元素相对于容器大小的大小的特权。
语法
这里是使用Anchor布局的简单语法:
layout: 'anchor'
例
下面是一个简单的例子,显示了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>
4.Ext.js 边框布局
描述
边框:在此布局中,各种面板嵌套并由边框分隔。
语法
这里是使用边框布局的简单语法。
layout: 'border'
例
下面是一个简单的例子显示了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>