Ext.js 列布局
2022-05-19 16:25 更新
描述
列：此布局用于在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。
语法
这里是使用列布局的简单语法
layout: 'column'
例
下面是一个简单的例子显示了列布局的用法
<!DOCTYPE html>
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="./ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
layout : 'column' ,
xtype: 'layout-column',
requires: ['Ext.layout.container.Column'],
width : 600,
items: [{
title : 'First Component width 30%',
html : 'This is First Component',
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>这将产生以下结果
以上内容是否对您有帮助：
更多建议：