ExtJS layout的9种样式详解(二)

例二：

Ext.onReady(function() {   
	var i = 0;      
	var navHandler = function(direction) {   
		if (direction == -1) {   
			i--;   
			if (i < 0) { i = 0; }   
		}      
		if (direction == 1) {   
			i++;   
			if (i > 2) { i = 2; return false; }   
		}
		var btnNext = Ext.get("move-next");   
		var btnBack = Ext.get("move-next");   
		if (i == 0) {   
			btnBack.disabled = true;   
		} else {   
			btnBack.disabled = false;   
		}   
		if (i == 2) {   
			btnNext.value = "完成";   
			btnNext.disabled = true;   
		} else {   
			btnNext.value = "下一步";   
			btnNext.disabled = false;   
		}
		card.getLayout().setActiveItem(i);   
	};   
   var card = new Ext.Panel({   
		width: 200,   
		height: 200,   
		title: '注册向导',   
		layout: 'card',   
		activeItem: 0, // make sure the active item is set on the container config!   
		bodyStyle: 'padding:15px',   
		defaults: {   
			border: false   
		},   
		bbar: [   
			{   
				id: 'move-prev',   
				text: '上一步',   
				handler: navHandler.createDelegate(this, [-1])                       
			},   
			'->',   
			{   
				id: 'move-next',   
				text: '下一步',   
				handler: navHandler.createDelegate(this, [1])   
			}   
		],   

		items: [{   
			id: 'card-0',   
			html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'   
		}, {   
			id: 'card-1',   
			html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'   
		}, {   
			id: 'card-2',   
			html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'   
		}],   
		renderTo: "container"   
	});   
});

 

 

六、column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：

例一：

Ext.onReady(function(){ 
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"column",
		width:500,
		height:100,
		items:[{title:"列1",width:100},
				{title:"列2",width:200},
				{title:"列3",width:100},
				{title:"列4",width:95}
		]
	});
});

 
上面的代码在容器组件中放入了四个元素，在容器组件中形成4列，列的宽度分别为100,200,100及剩余宽度，执行结果如

 
 

例二：columnWidth来定义子元素所占的列宽度(注意columnWidth的总和应该为1)

Ext.onReady(function(){ 
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"column",
		width:500,
		height:100,
		items:[{title:"列1",columnWidth:0.2},
	    	{title:"列2",columnWidth:0.3},
	    	{title:"列3",columnWidth:0.3},
		   {title:"列4",columnWidth:0.2}
		]
	});
});

 

 例三：column和columnWidth的混合使用

Ext.onReady(function(){ 
new Ext.Panel({
	renderTo:"hello",
	title:"容器组件",
	layout:"column",
	width:500,
	height:100,
	items:[{title:"列1",width:200},
		{title:"列2",columnWidth:0.3},
		{title:"列3",columnWidth:0.3},
		{title:"列4",columnWidth:0.4}
	]
	});
});

 

 

例四．

Ext.onReady(function() {   
	var win = new Ext.Window({   
		title: "Column Layout",   
		height: 300,   
		width: 400,   
		plain: true,   
		layout: 'column',   
		items: [{   
			title:"width=50%",   
			columnWidth:0.5,   
			html:"width=(容器宽度-容器内其它组件固定宽度)*50%",   
			height:200   
			},   
			{   
			title:"width=250px",   
			width: 200,   
			height:100,   
			html:"固定宽度为250px"   
			}               
		]   
	});   
	win.show();