Sencha Touch 2 Tutorial - Layouts -

Using Layouts in Sencha Touch 2

Intro and HBox

Layout은 컴포넌트들의 positioning과 sizing 을 정하는 겁니다. 예를 들어 이메일 클라이언트는 왼쪽에 메세지 리스트가 위치해 있어야 할 것입니다. 이것이 1/3을 차지한다고 합시다. 그 나머지 공간엔 메세지를 볼 수 있는 panel이 위치해 있을 겁니다.

이 구도라면 우리는 hbox layout을 사용해서 구현할 수 있습니다. 그 안에 flex라는 아이템을 넣어서 조절할 수도 있구요. Flexing 의 의미는 각각의 child component의 flex에 근거해서 공간을 나누겠다는 것입니다. 위의 조건을 만족하기 위해서 우리는 flex를 아래와 같이 나눌 수 있습니다.

코드는 아주 간단합니다. 그냥 컨테이너에 hbox 레이아웃을 정해주고나서 각 child 컴포넌트들에 flex를 지정해 주면 됩니다. (이 경우에는 panel이 됩니다.)

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

이 예제대로 하면 먼저 화면을 가득 채우는 container가 생성됩니다. 그 안에 메세지 리스트 panel 과 preview panel이 들어가게 됩니다. 두개의 아이템이 있는데요. 하나는 flex: 1 이고 다른 하나는 flex:2 입니다. 이 의미는 메세지 리스트는 전체 화면의 1/3차지하고 message preview 는 나머지 2/3 를 차지한다는 것입니다. 만약 이 콘테이너가 300 픽셀이라면 첫번째 것은 100 픽셀을 차지하고 나머지는 200픽셀을 차지하게 될 겁니다.

hbox는 가장 많이 사용되는 레이아웃 중 하나입니다. 이 레이아웃은 수평적으로 컴포넌트들을 배치하는데 사용할 수 있습니다. 더 자세한 사항은 HBox 문서를 봐 주세요.

VBox Layout

VBox는 HBox와 거의 비슷합니다. 좌우로 나누어지는 것이 아니라 상하로 나누어 지는것만 다릅니다.

이 레이아웃을 구현하는 코드는 hbox와 거의 비슷합니다. 단지 layout을 hbox 대신 vbox로 해 주시면 됩니다.

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

이 컨테이너 위 아래가 300 픽셀이라면 첫번째 패널은 100픽셀을 그리고 두번째 패널은 200 픽셀의 높이를 차지할 겁니다. 좀 더 자세한 사항은 VBox 문서를 보세요.

Card Layout

어떤 경우는 여러개의 스크린으로 정보를 보여줄 필요가 있습니다. 하지만 이 일을 하기에는 디바이스의 스크린 크기가 너무 작습니다. TabPanel 과 Carousels 는 한 스크린에 많은 정보를 보여줄 때 유용합니다. 이 두가지는 모두 Card layout 과 같이 쓰여 집니다.

Card layout은 현재 활성화 된 아이템의 전체 Container 크기를 차지합니다. 나머지 아이템들은 그 밑에 숨겨집니다. 그 숨겨진 아이템들 중에 한가지를 visible 하도록 만들 수 있습니다. 이 때 한번에 한 아이템만 visible 하도록 만들 수 있습니다.

여기 gray box가 Container 입니다. 그 안의 blue box 가 현재 활성화된 card 입니다. 나머지 세개는 비활성화 되서 모이지 않습니다. 하지만 이후에 swap 되서 활성화 될 수 있습니다. card layout을 direct 하게 생성하는 것은 아주 일반적이지는 않습니다. 아래와 같이 생성하시면 됩니다.

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

panel.setActiveItem(1);

여기서는 card layout을 panel 과 같이 생성했습니다. 이 경우는 두번째 아이템이 활성화 될 겁니다. 왜냐하면 setActiveItem(1)을 했기 때문이죠. 첫번째 아이템은 0 으로 지정하면 활성화 될 수 있습니다. 일반적으로 이 card layout은 Tap Panel 이나 Carousel 을 사용하시는것이 좋습니다.

Fit Layout

Fit Layout 은 가장 간단한 레이아웃일 겁니다. 이 레이아웃이 하는 일은 그냥 parent Container의 크기만큼 child component를 꽉 차게 만드는 것입니다.

예를 들어 parent Container가 200X200 픽셀이고 한개의 child component와 fit layout을 사용한다면 이 child component는 200X200 픽셀이 될 겁니다.

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

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

Ext.Viewport.add(panel);

fit layout을 사용하면서 container에 1개 이상의 아이템을 넣으면 첫번째 아이템만이 보여질 겁니다. 여러개의 아이템을 보이기를 원한다면 Card layout을 사용해야 합니다.

Docking

모든 레이아웃은 아이템들을 그 안에 탑재할 수가 있습니다. Docking은 parent Container의 위,아래,오른쪽,왼쪽 화면에 추가적인 Component를 넣을 수 있도록 해 줍니다.

예를들어, 처음에 다뤘던 hbox layout으로 돌아가서 화면 위에 다른 component를 탑재하기를 원한다고 가정해 봅시다.

이것은 툴바나 배너들을 사용할 때 자주 이용됩니다. 아래는 이것을 단지 dock: 'top' configuration을 함으로서 간단히 구현한 예제입니다.

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            dock: '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
        }
    ]
});

child component에 이 dock configuration을 사용해서 원하는 만큼의 아이템들을 간단하게 dock 할 수 있습니다. 그리고 방향을 어느쪽이든지 위치 시킬 수 있습니다. 우리가 위에서 사용했든 vbox 예제를 예로 들면 아래와 같이 할 수도 있습니다.

이것은 dock: 'left' 를 사용해서 구현하겠습니다.

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            dock: '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
        }
    ]
});

여러분은 사방에 여러개의 docked item들을 추가할 수 있습니다. (예를 들어 bottom 포지션에 여러개의 docking을 사용할 수 있습니다.)