Extjs4布局详解(七)——Column布局

Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。

Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。

注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。

另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。
 

示例代码：

 

Ext.create('Ext.panel.Panel', {         title: 'MHZG.NET - Column Layout - 按比例',        width: 350,         height: 250,x:20,y:100,   layout:'column',    items: [{             title: 'Column 1',            columnWidth: .25        },{             title: 'Column 2',            columnWidth: .55        },{             title: 'Column 3',            columnWidth: .20        }],         renderTo: Ext.getBody()    }); 

  

Ext.create('Ext.Panel', {         title: 'MHZG.NET - Column Layout - 混合模式',        width: 350,        height: 250,x:20,y:120,     layout:'column',        items: [{            title: 'Column 1',             width: 120        },{            title: 'Column 2',             columnWidth: .7        },{            title: 'Column 3',             columnWidth: .3        }],        renderTo: Ext.getBody()    });