sencha touch之布局

今天记录一下关于sencha touch中的几种布局，其实很简单的，还是直接上代码，一目了然

1：box布局，其实就是vbox和hbox，说白了一个是横着摆放，一个是竖着摆放

Ext.application({
		name:'myApp',
		launch: function(){
			var myPanel=Ext.create('Ext.Panel',{
				id:'myPanel',
				layout:{
					type:'hbox',
					pack:'end'
				},
				items:[
					{
						html:'One',
						flex:1,
						style:'background-color:red'
					},
					{
						html:'two',
						flex:2,
						style:'background-color:green'						
					}
				]
			})
			
			Ext.Viewport.add(myPanel);
			
		}
	
})

第二种card布局，可以想象成多个叠加在一起的卡片，比如一副扑克都放在一起，一次只能看到一张

Ext.application({
	
	name:'itKingApp',
	/**
	 * 	card 布局
	 */
	launch:function(){
		var panel=Ext.create('Ext.Panel',{
			//card 布局： 父容器内可以存在多个子组件，但每一次只能显示一个，所以需要使用setActiveItem
			//			来设置显示的子组件			
			// 可以使用docked配置选项，进行停靠，上下左右
			layout:'card',
			items:[
				{
					//docked:'left',
					html:'第一个',
					style:'background-color:green'
				},
				{
					//docked:'right',
					html:'第二个',
					style:'background-color:yellow'
				}				
			]

		});
		Ext.Viewport.add(panel);
		panel.setActiveItem(1);
	}
})

第三种是fit布局，fit就是填满的意思，就是不满父容器了

Ext.application({
	
	name:'itKingApp',
	/**
	 * 	fit 布局
	 */
	launch:function(){
		var panel=Ext.create('Ext.Panel',{
			items:[
				{
					html:'myPanel',
					style:'background-color:green'
				}
			],
			layout:'fit'
			//fit 布局： 1:只存在一个子组件时，自动扩展到与父容器同样的大小
			//		    2:一般都为1个子组件，如果存在多个的话，也只显示一个，
		});
		
		Ext.Viewport.add(panel)
	}
})

以上这些，其实自己用代码试验两次，就知道怎么回事了，这只是大体布局，其实精确的还是使用css了