5일차 : Sencha Touch 2 layout 에 대한 이해

Intro

Layout 은 Container 에 items 들이 어떻게 배치되야 하는지, 그리고 그 크기는 어떠한지를 결정할 때 사용된다.

HBox Layout

수업 정보 시스템 어플이 있다고 치자. app 을 만들 때 좌편에는 수업 이름, 우편에는 수업 이름 중 하나를 클릭했을 때 해당 수업에 대한 정보를 보여주는 어플이 있다고 치자. 이럴 경우, 두 개의 Panel 이 필요하다고 예상할 수 있다. 좌편의 수업 이름 section 은 1/3 만큼을 차지하고 우편의 수업 이름 section 은 2/3 만큼 차지하게 하고 싶다. 아래의 코드를 보자.

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

각 아이템에서 flex 를 값을 통해 적절하게 화면의 가로를 분할 하고 있다. (1:2) 로 분할이 될 것이다. 

HBox layout 을 사용하는 방법은 layout 속성에 'hbox' 를 주면 된다.

VBox Layout

위와는 반대로 세로로 정렬을 하고 싶을 경우가 있다. 이 때 사용하는 레이아웃이 VBox layout 이다.

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

위의 코드를 실행하면 아래와 같이 분할 될 것이다.

Card Layout

여러 가지 Components 들을 보여주고 싶은데 화면상의 제약으로 인해 한번에 하나 밖에 못 보여줄 때가 있다. 그 때 사용하는 레이아웃이 Card Layout 이다. 실제로 우리가 직접 쓰기 보다는 TabPanel 이나 Carousel 에서 이 레이아웃을 사용하고, 우리는 TabPanel 이나 Carousel 을 쓰는 경우가 더 빈번하다. 

card layout 은 자신의 Container 의 크기에 맞춰지고, 그러므로 현재 active 된 아이템은 해당 크기를 꽉 채우도록 한다. 한번에 하나만 보여지며, 나머지 아이템들은 보이지 않게 된다.

위의 그림에 Card 가 적힌 파란색 카드는 현재 보이는 아이템을 나타내고 나머지 우편의 파란색 카드들은 지금은 보이지 않지만 나중에 보이게 될 지도 모르는 아이템을 나타낸낸다. Card 뒤의 회식 배경 된 카드는 Container 를 의미한다.

코드로 직접 card layout 을 쓸 일은 잘 없지만 만든다면 아래와 같이 쓸 수 있다.

var panel = Ext.create('Ext.Panel', {
    layout: 'card',
    items: [
        {
            html: "First Item"
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }
    ]
});

panel.setActiveItem(1);

Fit Layout

자식 component 중에 하나를, fit layout 의 Container 의 전체 크기에 꽉 맞게끔 보여주는 것이다.

var panel = Ext.create('Ext.Panel', {
    width: 200,
    height: 200,
    layout: 'fit',

    items: {
        xtype: 'panel',
        html: 'Also 200px by 200px'
    }
});

Ext.Viewport.add(panel);

하나 이상의 아이템이 있을 경우, container 가 fit layout 일 경우, 첫 번째 item 만 보이게 된다.

Docking

Container 에서 item 을 고정된 위치에 둘 수 있다. 'top' 'right' 'bottom' 'left' 이렇게 네 군데 중 하나를 둘 수 있다. 아래는 예제 코드 다.

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            docked: 'top',
            xtype: 'panel',
            height: 20,
            html: 'This is docked to the top'
        },
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

docked 를 left 로 주면 어떻게 될까?? 즉, 아래 모양 처럼 만들어 보자.

코드는 아래와 같다.

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            docked: 'left',
            xtype: 'panel',
            width: 100,
            html: 'This is docked to the left'
        },
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

Pack and Align

Pack 과 Align 은 레이아웃에서 자식 elements 들을 어떻게 배치할 지에 결정짓는다. 

pack 은 현재 레이아웃의 axis(축) 방향으로 정렬을 하는 것이고,

align 은 현재 레아이웃에 수직한 axis(축) 방향으로 정렬을 하는 것을 의미한다.

pack 이 가질 수 있는 값은 start, center, end 이며

align 이 가질 수 있는 값은 start, center, end, stretch 등이 있다.

HBox 일 때 

pack 을 주게 되면 수평으로 아이템이 채워질 때 어디서 부터 채울 것인지를 정하는 것이고

align 을 주게 되면 수직에서 어느 위치에 둘 것인지를 정하는 것이다. stretch 의 경우 수직으로 쫘악! 펴준다는 의미이다.

VBox 일 때 

pack 을 주게 되면 수직으로 아이템이 채워질 때 어디서 부터 채울 것인지를 정하는 것이고

align 을 주게 되면 수평에서 어느 위치에 둘 것인지를 정하는 것이다. stretch 의 경우 수평으로 쫘악! 펴준다는 의미이다.

아래 예제 코드를 보자.

Ext.define("Sample.view.Test", {
    extend: 'Ext.Panel',
	xtype: 'testpanel',
    
    config: {
		title: 'Home',
		iconCls: 'home',
		
		scrollable: false,
		styleHtmlContent: true,
		
		layout: 'fit',
		
		items: [
			{
				xtype: 'panel',
				
				layout: {
					type: 'hbox',
					pack: 'start',
					align: 'stretch'
				},
				
/*				defaults: {
					flex: 1
				},*/
				
				items: [
					{xtype: 'button', text: 'Sencha'},
					{xtype: 'button', text: 'Touch'},
					{xtype: 'button', text: '2'}
				]
			}
		]
    }
});

결과 화면은 아래와 같다. (위의 소스코드는 전체 app 에서 일부분을 캡쳐한 것이다. 위 코드 만으로는 아래와 같은 화면이 나오지 않는다 ..ㅎ)

위의 코드에서 defaults 된 부분의 주석 처리를 해제 하고 다시 실행하면 아래와 같이 된다.