第3章 面板与布局-3.3 ST2.0的常用布局

    本节介绍Sencha Touch中使用的集中布局方式，包括盒布局、Fit布局以及Card布局。首先看最常用的盒布局方式。

3.3.1 盒布局

    ST2.0中使用Ext.layout.AbstractBoxLayout类的两个子类：HBoxLayout类与VBoxLayout类来实现水平盒布局与垂直盒布局。

 type: 指定容器组件的布局方式。为容器指定布局方式实际上是为容器隐式指定一个布局管理器，该布局管理器自动计算并指定容器中每个子组件或元素的尺寸及放置位置。hbox是水平盒布局。

align：指定容器中子组件的垂直对齐方式。默认值为center，表示子组件的纵向对齐方式为中央对齐。

     水平盒布局的align配置选项及pack配置选项的可设定值及对其方式

     

配置选项	选项值	对其方式
align	center	中央对齐
align	start	顶部对齐
align	end	底部对齐
align	strentch	子组件的高度自动扩展为容器高度
pack	center	中央对齐
pack	start	向左对齐
pack	end	向右对齐
pack	strentch	两端对齐

代码清单3-5 app.js脚本文件

Ext.Loader.setPath({
    'Ext': 'sdk/src'
});
//</debug>
Ext.require('Ext.Panel');
Ext.application({
    name: 'MyApp',
    icon: 'resources/images/icon.png',
	glossOnIcon :false,
	phoneStartupScreen:'resources/images/phone_startup.png',
	tabletStartupScreen:'resources/images/tablet_startup.png',
	launch:function(){
		var panel = Ext.create('Ext.Panel', {
			id : 'myPanel',
			layout: {
				type:'hbox',
				align :'stretch'
			},
			items : [
				{
					flex : 1,
					html : '子组件1',
					style : 'background-color: #5E99CC;'
				},
				
				{
					flex : 2,
					html:'子组件2',
					style:'background-color: #759E60;'
				}
			]	
		});
		Ext.Viewport.add(panel);
    }
});

 

垂直盒布局的align配置选项及pack配置选项的可设定值及对其方式

     

配置选项	选项值	对其方式
align	center	中央对齐
align	start	向左对齐
align	end	向右对齐
align	strentch	子组件的高度自动扩展为容器高度
pack	center	中央对齐
pack	start	顶部对齐
pack	end	底部对齐
pack	strentch	两端对齐

3.3.2 Fit布局

    在ST2.0中，当容器组件中只有一个子组件时，通过使用Fit布局来将子组件的尺寸自动扩展为父容器组件的尺寸，使其充满整个父容器组件内部。

即使在父容器中放置两个子组件，但是浏览器只会显示一个子组件并将其尺寸扩展为父容器组件的尺寸。