Column
优质
小牛编辑
134浏览
2023-12-01
此布局用于在容器中显示多个列。 我们可以为列定义固定宽度或百分比宽度。 宽度百分比将根据容器的完整大小计算。
语法 (Syntax)
以下是使用Column布局的简单语法。
layout: 'column'
例子 (Example)
以下是一个显示Column布局用法的简单示例。
<!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 : '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>