'layout'에 해당되는 글 1건

  1. 2010.02.21 Ext JS 를 이용한 고급 웹 애플리케이션 UI 설계 - Viewport 편 (2)

Ext JS를 이용한 애플리케이션 설계 시에 인기 있는 기능은 Viewport 이다.  이것은 Ext.onReady() 런타임시에 유일한 인스턴스로 생성되어 Ext JS 애플리케이션 영역을 관리하는 특수한 패널로 인스턴스 생성시 자동으로 브라우저의  표시영역 크기에 맞게 document.body 에 렌더링 된다.

여기에서는 Viewport와 연관되어 Layout에 대해서도 잠깐 살펴볼 예정이다.  


Ext.Viewport 구성옵션

Ext JS에서는 클래스의 인스턴스를 생성할 때 각종 구성옵션(Configuration Option)을 설정함으로써 클래스들의 초기 동작과 습성을 지정할 수 있는데 각각의 구성옵션이 어떤 설정을 위한 것인지는 API 문서를 통해서 확인 할 수 있다.  

Viewport 에서 사용하는 구성옵션 중에 레이아웃을 지정하는 layout 옵션과 설정된 레이아웃 영역에 배치할 패널들을 지정한 items가 있다.  이 두 가지는 필수 설정이므로 반드시 지정해야 한다..


layout

현재 프레임워크에서 제공되어 사용할 수 있는 레이아웃으로는 absolute, accordion, anchor, auto, border, card, column, fit, form, hbox, menu, table, toolbar, vbox 와 같이 14 가지를 가지고 있다. 


   
이것들 중 가장 자주 사용되는 것은 border 레이아웃과 fit 레이아웃이다.  Border 레이아웃은 일반적으로 비즈니스 응용 프로그램의 기본 UI로 사용되는 레이아웃이고 fit 레이아웃의 경우에는 좀더 복잡한 중첩 레이아웃을 표현하기 위해 필수적인 레이아웃으로 거의 활용된다.


items

items 옵션에는 레이아웃에 배치 될 요소들이 배열로 지정하게 된다.  이때 layout 에 따라 items 를 구성하는 요소들은 특정한 구성옵션을 필요로 할 수 있다.  그렇기 때문에 각각의 레이아웃에 대한 특징을 정확히 알고 있어야 한다.

예를 들면 border 레이아웃의 경우 패널 구성옵션에 region 을 통해 자신이 위치 할 영역이 지정되어야 한다.  그러면 실제로 Viewport를 만들어 보자.

1. HTML 소스
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Viewport Example</title>
        <!--Ext JS 기본 CSS 요소-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!-- Ext JS 기본 JavaScript 요소-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
     <script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!-- 구현 코드 JavaScript -->
        <script type="text/javascript" src="../js/ext/myApp.js"></script>
</head>
<body>
<div></div>
</body>
</html>

2. JavaScript 
  A. fit 레이아웃
Ext.onReady 런타임에서 Ext.Viewport 클래스의 인스턴스를 생성하고 구성옵션의 레이아웃을 ‘fit’ 으로 설정합니다.  fit 레이아웃은 나뉘어진 영역이 없이 단일의 콘테이너로써 자식의 되는 컴포넌트를 꽉 채워 표시한다.  이 것은 중첩된 레이아웃의 형태를 구성하기 위해 매우 유용하게 사용된다.

Ext.onReady(function(){
    new Ext.Viewport({
        layout:'fit',
        items:[
            {
                title:'Fit Panel Example',
html:'<div style="text-align:center;padding:100px;"></div>',
                collapsible: true
            }
        ]
    });
});

items에 지정한 요소는 단순히 HTML을 렌더링하는 패널이다.  collapsible 값을 true로 설정함으로써 viewport에 가득 채워진 패널을 접어 레이아웃 영역을 확보할 수 있게 된다.


  B. border 레이아웃
 

Viewport 에 border 레이아웃을 설정하면 그림에서 언급한 형태로 레이아웃이 구성되어진다.  이때 그림에서 지정한 것과 같이 레이아웃을 구성하는 각 요소들에 region 구성 옵션을 지정된 ‘north’, ‘west’, ‘center’, ‘east’, ‘south’를 지정해 주어야 한다. 

 

만약 지정되지 않을 경우 구성 요소가 표시되지 않으니 유의해야 한다.  다만 border 레이아웃에서 중간 영역(region:’center’)은 필수 임으로 꼭 지정하도록 한다.

Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
title : 'East Item',
html : '<p>East</p>',
padding : 20,
region : 'east'
},{
title : 'Center Item',
html : '<p>Center</p>',
padding : 20,
region : 'center'
},{
title : 'West Item',
html : '<p>West</p>',
padding : 20,
region : 'west'
},{
title : 'South Item',
html : '<p>South</p>',
padding : 20,
region : 'south'
},{
title : 'North Item',
html : '<p>North</p>',
padding : 20,
region : 'north'
}]
});

items 의 각각의 요소의 collapsible와 split 속성을 지정하여 해당 요소를 접거나 펼칠 수 있고 드래그를 통해서 요소의 너비를 변경할 수 있다. Ext.Container를 상속받고 있는 컴포넌트들의 경우에는 구성옵션에 레이아웃을 지정하여 중첩 레이아웃 구성을 할 수 있다.


  C. Accordion
 


스택 레이아웃으로 한 번에 하나의 패널을 표시하도록 한다.  items에 지정된 요소들은 모두 아코디언 패널로 변환되어 표시된다.
 


만약 위의 아코디언 패널에 개인적인 스타일을 지정해야 하는 경우에는 다음의 예시 처럼 items의 요소에 id 속성을 지정하고 style 을 지정할 수 있다.

  CSS 소스
#panel2 .x-panel-body {
   background:#ffe;
   color:#15428B;
   padding: 35px;
}
#panel2 .x-panel-header-text {
   color:#555;
   font-weight:bold;
}

  JavaScript 소스
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'accordion',
items: [{
title : 'Menu1',
html : '<p>Menu1</p>'
},{
title : 'Menu2',
html : '<p>Menu2</p>’,
                    id : ‘panel2’
},{
title : 'Menu3',
html : '<p>Menu3</p>'
}]
});
});


Viewport 컴포넌트에 대해서 살펴보려고 했으나 그 내용이 layout package에 더 가까웠네요.  하지만 Ext JS를 이용한 고급 UI 설계를 위해 매우 중요한 기초와 같습니다. 

그리고 14가지의 레이아웃을 포함하고 있으나 특별히 개념적으로 이해하기 위한 수단으로는 fit과 border의 정도만 잘 이해한다면 그 외의 레이아웃을 사용하는데 있어서는 그다지 어려움을 느끼지 않을 것입니다.


레이아웃 샘플 http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html
설명 http://www.extjs.com/learn/Ext_2_Overview#Layouts

함께 읽어 보세요.

Advanced Application Design in Ext JS - http://rhio.tistory.com/303
VCL(Vissual Component Library) in Ext JS - http://rhio.tistory.com/345

데꾸벅님 블로그 - Extjs Viewport를 이용한 기본레이아웃 잡기 - http://techbug.tistory.com/13 



신고
Posted by Rhio.kim