[ ExtJS ] ExtJS 기초 문법, 그리고 Border Layout.

ExtJS 란?

ExtJS 는 Client-Side 기반의 JavaScript Framework 이다.

이는 수백가지가 넘는 강력한 UI 컴포넌트를 지원하며,

Classic, Gray, Crisp 등의 여러 테마 또한 지원한다.

컴포넌트 제작은 key value 형태를 가진 JSON 구조로 생성된다.

현 포스팅에선 ExtJS 설치 방법 포스팅에서 사용한 test.html 파일을 다룬다.

먼저, ExtJS 의 기초문법 몇 가지를 살펴보자.

Ext.onReady()

Ext.onReady(function() {
	...
});

Ext.onReady(function() { ... } ) 은 기존 JavaScript 의 window.onload 와,

JQuery 의 $(document).ready(function(){}), 그리고 $(function(){}) 와 같은 기능을 수행한다.

Ext.onCreate()

Ext.onCreate(..., {
	items: [
    	{
        	title: ...,
            ...
        },
        {
        	title: ...,
            ...
        }
    ]
});

컴포넌트들을 화면에 뿌려주고자 할 때 이를 받아줄 View 컴포넌트들이 필요한데,

{} 안의 item 들을 가진 View 컴포넌트를 생성하는 명령어이다.

스케치북에 그림을 그리는 것을 예로 들면,

그림을 그리기 위해 스케치북을 생성하는 것과 같은 것이다.

ViewPort, Panel, Container

방금 언급한 스케치북의 역할을 하는 컴포넌트들이다.

ViewPort 는 최상단 루트 컴포넌트를 제작하고자 할 때 사용하며,

Panel 은 ViewPort 의 자식들을 그리기 위해 사용한다.

Container 는 단순하게 영역을 나누기 위한 경우에만 사용한다.

ViewPort 는 별도의 높이, 너비를 주지 않아도 루트 컴포넌트기에 자동으로 100% 를 채워준다.

만약 Panel 을 아래와 같이 작성했다면,

Ext.onReady(function() {
    Ext.create("Ext.panel.Panel", {
        layout: 'border',
        width: 500,
        height: 200,
        .
        .
        .
        items: [
            .
            .
            .
        ]
    });
});

지정한 width, height 에 맞춰 그려진다.

반면 ViewPort 를 아래와 같이 작성했다면,

Ext.onReady(function() {
    Ext.create("Ext.container.Viewport", {
        layout: 'border',
        width: 500,
        height: 200,
        .
        .
        .
        items: [
            .
            .
            .
        ]
    });
});

width, height 를 지정해주어도 브라우저의 크기에 100% 맞추어 그려지게 된다.

본 포스팅에선 ViewPort 를 사용했다.

레이아웃(layout)

ExtJS 의 레이아웃의 종류는 Absolute, Accordion, Border, Hbox/Vbox 등이 있다.

레이아웃에 대해서는 후에 자세하게 포스팅하도록 하겠다.

현 포스팅에서는 실무에서 자주 쓰이는 Border Layout 을 사용한다.

Border Layout 에 대해서 간단하게만 설명하면 말 그대로 보드판 하나를 배치하되,

region 이라는 속성으로 보드판 안의 내용들을 동, 서, 남, 북, 중앙으로 배치할 수 있다.

밑의 예시를 보면 이해가 갈 것이다.

자, 그럼 위에서 언급한 것들로 간단한 레이아웃을 만들어보자.

먼저, test.html 의 Ext.onReady() 안의 내용을 아래와 같이 바꾼다.

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ExtJS Test</title>
    <link href="../classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript">
    
        Ext.onReady(function(){
            Ext.create("Ext.container.Viewport",{
                renderTo : Ext.getBody(),
                layout : {
                    type: 'border'
                },
                defaults: {
                    titleAlign: 'center'
                },
                items:[
                    {
                        region : 'north',
                        title: 'North',
                        border : true,
                        html: 'North Content'
                    },
                    {
                        region : 'center',
                        title: 'Center',
                        border : true,
                        html: 'Center Content'
                    },
                    {
                        region : 'south',
                        title: 'South',
                        border : true,
                        html: 'South Content'
                    },
                    {
                        region : 'west',
                        title: 'West',
                        border : true,
                        html: 'West Content'
                    },
                    {
                        region : 'east',
                        title: 'East',
                        border : true,
                        html: 'East Content'
                    }
                ]
            });
        });
        
    </script>
</head>
<body>
    
</body>
</html>

onReady() 와 onCreate() 는 앞서 말했으니 넘어가고,

onCreate() 내의 속성들만 집중해서 살펴보면,

renderTo 는 어디에 보여질지를 결정하는 것인데 Ext.getBody() 로 <Body> 태그를 선택했다.

layout 은 앞서 말한 layout 종류 등을 선언할 때 쓰이며, 현 포스팅은 Border 를 선언했다.

그리고 items 는 화면에 그려질 item 들을 선언해놓은 것인데,

region 의 east(동), west(서), south(남), north(북), center(중앙) 을 통해 item 들을 배치시켰고,

title 은 해당 item 의 제목을, border: true 는 테두리선을, html 은 item 내의 내용을 선언했다.

실행 결과는 다음과 같다.

실행 결과

저작자표시

'Coding Story > ExtJS' 카테고리의 다른 글

[ ExtJS ] 버튼을 클릭해 팝업창 띄우기 ExtJS Popup (2)	2020.11.04
[ ExtJS ] Toolbar 를 생성하고 위치를 지정하기 (0)	2020.11.04
[ ExtJS ] Button을 만들고 Event Listeners 달기. (0)	2020.11.03
[ ExtJS ] ExtJS의 레이아웃 Layout (0)	2020.11.03