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

最新推荐文章于 2024-03-18 18:37:48 发布

转载最新推荐文章于 2024-03-18 18:37:48 发布 · 917 阅读

ExtJS 专栏收录该内容

38 篇文章

订阅专栏

本文深入探讨了Column布局的使用方法，包括如何指定列宽为百分比或固定值，以及如何灵活地应用比例与混合模式来布局面板。通过示例代码展示实际操作过程，帮助开发者掌握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()    
	});