免費(fèi)AI編程助手
Ext.js 列布局
2022-05-19 16:25 更新
描述
列：此布局用于在容器中顯示多個(gè)列。 我們可以定義列的固定寬度或百分比寬度。 百分比寬度將基于容器的完整大小計(jì)算。
語法
這里是使用列布局的簡(jiǎn)單語法
layout: 'column'
例
下面是一個(gè)簡(jiǎn)單的例子顯示了列布局的用法
<!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>這將產(chǎn)生以下結(jié)果
以上內(nèi)容是否對(duì)您有幫助：
更多建議：