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

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

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

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

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

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

示例代码：

 

1. Ext.create('Ext.panel.Panel', {         
2.         title: 'MHZG.NET - Column Layout - 按比例',        
3.         width: 350,         
4.         height: 250,
5.         x:20,
6.         y:100,   
7.         layout:'column',    
8.         items: [{             
9.             title: 'Column 1',            
10.             columnWidth: .25        
11.         },{             
12.             title: 'Column 2',            
13.             columnWidth: .55        
14.         },{             
15.             title: 'Column 3',            
16.             columnWidth: .20        
17.         }],         
18.         renderTo: Ext.getBody()    
19.     }); 

 

1. Ext.create('Ext.Panel', {         
2.         title: 'MHZG.NET - Column Layout - 混合模式',        
3.         width: 350,        
4.         height: 250,
5.         x:20,
6.         y:120,     
7.         layout:'column',        
8.         items: [{            
9.             title: 'Column 1',             
10.             width: 120        
11.         },{            
12.             title: 'Column 2',             
13.             columnWidth: .7        
14.         },{            
15.             title: 'Column 3',             
16.             columnWidth: .3        
17.         }],        
18.         renderTo: Ext.getBody()    
19.     });