ExtJS : 레이아웃 속성

ExtJS : 레이아웃 속성

지난 포스팅에서 레이아웃 속성 중 'fit' 과 'border' 속성에 대해 알아봤다.

fit은 가득 채우기, 

border는 가득 채운 상태에서 item들의 레이아웃을 나누는 속성이었다.

추가적으로 쓰이는 레이아웃 속성에는 

• center
• absolute
• accordion
• card
• hbox/vbox

등등이 있는데, 하나씩 예를 보자.

center

부모패널의 layout 속성에 center를 부여하면, 자식 패널은 브라우저 화면 가운데 위치하며 브라우저 크기와 관계없이 가운데 위치하는 반응형이 된다.

Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: true,
    layout: 'fit',
    items:[{
      xtype: 'panel',
      title: '부모패널',
      layout: 'center',
      items: [{
        xtype: 'panel',
        width: 300,
        height: 300,
        border: true,
        title:'첫째'
      }]
    }]
  });
});

absolute

css의 absolute와 같이 좌표를 설정하여 위치를 지정하며, 좌표값을 주지 않고 패널 2개를 설정하면 두 패널이 겹치기 때문에 뒤에 선언한 패널만 보이게 된다. 아래와 같이 x,y 좌표를 직접 지정하여 이동시킨다.

Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: true,
    layout: 'fit',
    items:[{
      xtype: 'panel',
      title: '부모패널',
      layout: 'absolute',
      items: [{
        xtype: 'panel',
        width: 300,
        height: 300,
        x:300,
        y:500,
        border: true,
        title:'첫째'
      },{
        xtype: 'panel',
        width: 300,
        height: 300,
        border: true,
        title:'둘째'
      }]
    }]
  });
});

accordion

jQuery에서의 어코디언메뉴 형태가 나오게 된다.

Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: true,
    layout: 'fit',
    items:[{
      xtype: 'panel',
      title: '부모패널',
      layout: 'accordion',
      items: [{
        xtype: 'panel',
        title:'첫째',
        html: '첫째입니다'
      },{
        xtype: 'panel',
        title:'둘째',
        html: '둘째입니다'
      }]
    }]
  });
});

card

포커카드 덱을 맨 위에서 바라본것과 같이 차례로 컴포넌트들이 아래에 겹쳐있게 되어 첫째만 보여주게 된다.

• 어플리케이션에서 페이지를 넘기거나
• 사진을 슬라이드하거나
• 고정된 좌측 메뉴(nav bar)를 클릭하면 우측 페이지가 바뀌는 등

여러 기능에 다방면으로 쓰인다.

vbox

기존과 같이 세로로 컴포넌트들이 추가되는 것은 같다.

하지만 기존과 다르게 아이템 컴포넌트들이 가로로 꽉 차지 않는 차이가 있다.

hbox

세로가 아닌 가로로 컴포넌트들이 추가된다.