[6기 부산 심현정] Ext JS4 파헤치기 #4

[Ext JS4 파헤치기 #4 Ext JS4 Layout 이해하기]

  웹 페이지의 UI(User Interface)를 구성하기 위해 가장 먼저 생각해야 할 부분은 레이아웃입니다. 페이지 또는 컴포넌트의 내부 컴포넌트들을 어떤식으로 구성할 것인가에 따라 그에 맞는 레이아웃 속성을 정해주어야 합니다. 주로 panel과 container 타입 컴포넌트에 사용됩니다. 

몇가지 주로 사용되는 레이아웃 속성값을 알아보겠습니다.

1. border

border 는 여러 panel을 가지는 UI 레이아웃을 구성할 때 유용한 속성값입니다. 인접한 패널들을 다룰 때 주로 다룰 때 사용합니다. 간단한 예제를 통해 구현해 보겠습니다.

Ext.define('Test.view.LayoutPanel', {

extend: 'Ext.panel.Panel',

title : 'Layout example',

alias : 'widget.LayoutPanel',

layout: 'border',

    items: [{

        title: 'Region south',

        region: 'south',   

        xtype: 'panel',

        height: 150,

        split: true,         

        margins: '0 5 5 5'

    },{

        title: 'Region west',

        region:'west',

        xtype: 'panel',

        margins: '5 0 0 5',

        width: 200,

        split: true,

        layout: 'fit'

    },{

        title: 'Region center',

        region: 'center',     

        xtype: 'panel',

        layout: 'fit',

        margins: '5 5 0 0'

    }],

});

이 view 소스코드는 레이아웃을 구성하는 Panel 컴포넌트입니다. 이 패널의 layout 속성값은 border로 정의되어 있습니다. 이 panel 은 items 속성을 통해 3개의 panel 이 포함되어 있습니다. 

'border' 에서 중요한 것은 item들의 region입니다. view의 내부 컴포넌트들을 어떤 위치에 배치할 것인가를 결정하는 요소이기 때문입니다. 그래서 item 컴포넌트들에게 region 속성을 넣어줘야 합니다. 

region의 속성값으로는 center/south/west/north 이 있습니다.

위 소스코드처럼 레이아웃을 적용한 결과는 아래와 같습니다.

2. fit

부모 컨테이너(컴포넌트)를 가득 채울때 사용하는 속성값입니다. 안드로이드 UI의 'parent_wrap' 속성값과 유사합니다. 

Ext.define('Test.view.LayoutPanel', {

extend: 'Ext.panel.Panel',

title : 'Layout example',

alias : 'widget.LayoutPanel',

layout:'fit',

items: {

   title: 'Fit Panel',

   html: 'Fit panel',

}

});

결과는 아래와 같이 단순합니다.

1번의 border 예제의 세 번째 item에서도 layout : 'fit' 을 사용하였는데, 이 속성값을 이용하여 나머지 item을 채우고 남은 부분을 가득 채우는 패널을 만듭니다.

3. vbox/ hbox

레이아웃을 가로로 또는 세로로 나눌 수 있는 속성값입니다.

vbox는 세로를 (vertical) hbox는 가로를(horizontal) 나눠서 내부 컴포넌트들을 배치할 수 있습니다.

Ext.define('Test.view.LayoutPanel', {

extend: 'Ext.panel.Panel',

title : 'Layout example',

alias : 'widget.LayoutPanel',

layout: {

   type: 'vbox',

   align : 'stretch',

   pack  : 'start',

},

items: [

   {xtype: 'panel', title:'vbox panel 1', flex:1},

   {xtype: 'panel', title:'vbox panel 2', flex:1},

   {xtype: 'panel', title:'vbox panel 3', flex:2}

]

});

'vbox' 레이아웃인 컨테이너의 내부 컴포넌트들은 flex 또는 height로 컴포넌트가 차지하는 세로 사이즈를 정할 수 있습니다. flex 값을 줌으로써 고정값을 가지는 컴포넌트들 크기를 제외하고 남은 크기에서 차지하는 weight를 정할 수 있습니다. 위 소스코드는 내부 컴포넌트들이 flex를 1/1/2를 가지기 때문에 height를 25%/25%/50%씩 차지하게 됩니다.

layout 속성의 align를 'stretch'를 줌으로써 컴포넌트를 width:100%를 준 것처럼 쭉 늘릴 수 있습니다.

위 소스코드를 적용한 결과는 아래와 같습니다.

layout 속성값을 'hbox'로 바꾸면  아래와 같은 결과가 나옵니다.

  Ext JS4 에서 제공하는 layout은 이 네 가지 이외에도 많지만, 어플리케이션 UI 레이아웃을 구성할 때는 주로 'border'와 'fit'을 사용하게 될 것입니다. 여러 레이아웃을 제공하니 필요에 따라 Ext JS reference 사이트(http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.enums.Layout)를 참조하면 될것 같습니다.