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