描述
列：此布局用于在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。
语法
这里是使用列布局的简单语法
layout: '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>这将产生以下结果
