[원] 센차 터치 포석

오늘은 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);

			

		}

	

})

두 번째 카드 레이아웃은 여러 개의 겹쳐진 카드로 상상할 수 있다. 예를 들어 포커 한 벌을 모두 한데 놓으면 한 번에 한 장만 볼 수 있다.
 
 

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를 정확하게 사용했다
 
저자: jjx0224 2013-9-30 10:10:43
텍스트 링크
읽기: 111 설명: 0
의견 보기