본문 바로가기
JavaScript/ ExtJS

ExtJS : 기본문법 & 레이아웃

털 업 2018. 3. 8. 11:20

ExtJS : 기본문법 & 레이아웃

Basic

예를들어 HTML에서 다음과 같은 코드가 있다고 가정하자.

1
2
3
4
<body>
  <input type="button" value="버튼"></input>
  <input type="text" value="텍스트"></input>
</body>
cs


비유하자면 이것은 <body> 라는 큰 도화지에 <input>태그 2개를 그린 것이다.

ExtJS에서는 실제로 <body>태그 안에 아무것도 넣지 않지만, app.js에 코드를 작성하면 미리 정의되어 있는 컴포넌트들이 자동으로 삽입되어 index.html에 보여지게 되어 있다. 


즉 <body>에 panel / viewport와 같이, ExtJS에서 사용되는 도화지를 하나 더 올리고, 

미리 정의해둔 컴포넌트를 가져다가 쓰는 것이라 요약할 수 있다.

Panel

패널은 레이아웃을 구성할 때 빈번하게 쓰이는 컨테이너로 하위 구성요소를 포함할 수 있다.
쉽게말해 판떼기를 만든다.

Panel is a container that has specific functionality and structural components that make it the perfect building block for application-oriented user interfaces.

Panels are, by virtue of their inheritance from Ext.container.Container, capable of being configured with a layout, and containing child Components.

사용

선언은 Ext.panel.Panel로 한다.

1
2
3
4
5
Ext.onReady(function(){
  Ext.create("Ext.panel.Panel", {
    
  })
});
cs


다음과 같이 흰 판이 생긴다.

속성

Ext.create() 로 생성했으면, 두번째 파라미터로는 JSON 형태의 key-value 속성정의를 하면 된다.

http://docs.sencha.com/extjs/6.5.3/classic/Ext.panel.Panel.html#properties


renderTo는 어디에 보여질지 결정하는 것으로 현재는 <body>를 선택했다.

특정 태그안에 삽입하고 싶다면 DOM을 사용해 document.getElementById("id") 와 같이 사용할 수도 있다.

1
2
3
4
5
6
7
8
9
Ext.onReady(function(){
  Ext.create("Ext.panel.Panel", {
    width: 300,
    height: 300,
    renderTo: Ext.getBody(),
    border: true
  });
});
 
cs

결과

가로세로 300픽셀의 패널이 생겼다.

Viewport

위의 패널은 300픽셀을 제외하고는 비어있다. 화면을 가득 채우고 싶다면 Viewport를 사용할 수 있다.

Ext.container.Viewport로 생성하고 layout:fit 속성을 주면 화면을 가득 채울 수 있으며 반응형이 된다.

Viewport 안에 panel 속성을 또 다시 정의할 수 있으며, items 속성을 이용해 JSON array 형태로 작성하면 된다.


xtype 속성은 <input type="">과 비슷하다고 보면 되며

xtype의 value값으로 들어간 'panel' 은 Ext.panel.Panel의 alias(별칭) 이다. 

각 별칭은 공식 Docs에서 확인할 수 있다.

1
2
3
4
5
6
7
8
9
10
Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    layout: 'fit',
    renderTo: Ext.getBody(),
    border: true,
    items: [{
      xtype: 'panel'
    }]
  });
});
cs


아래는 textfield 2개를 정의하는 방법 2가지를 보여준 것으로, 어떻게 생성하든 textfield는 동일하게 생성되지만

굳이 xtype이 정의된 컴포넌트(alias가 정의된)를 Ext.create() 할 필요는 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
Ext.onReady(function(){
  Ext.create("Ext.panel.Panel", {
    width: 300,
    height: 300,
    renderTo: Ext.getBody(),
    border: true,
    items: [{
      xtype: 'textfield'
    },{
      xtype: Ext.create("Ext.form.field.Text")
    }]
  });
});
cs

결과

inline, block

HTML의 <div>와 같이 ExtJS 컴포넌트들은 기본적으로 block 속성을 가진다.

따라서 별도의 레이아웃 속성을 지정하지 않으면 컴포넌트들이 우측으로 붙지 않고 위에서 아래로 붙는다.

이중구조

items 안에 items를 넣을 수 있다. Viewport 안에 panel을, 다시 panel 안에 textfield와 button을 넣었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: true,
    layout: 'fit',
    items: [{
      xtype: 'panel',
      title: '패널입니다',
      items :[{
        xtype: 'textfield'
      },{
        xtype: 'button',
        text: '버튼'
      }]
    }]
  });
});
cs

결과

Layout

레이아웃은 region 속성을 이용해 제어하며, region 속성을 사용하려면 부모 컨테이너가 layout: 'border' 를 선언해야 한다.


region 속성에는 5가지가 있다. 단어 그대로의 뜻이다 :

  • north 
  • center
  • south
  • east
  • west

Viewport를 부모 컨테이너로 두고, 패널 2개를 위아래로 위치시켰다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: 'true',
    layout: 'border',
    items: [{
      xtype: 'panel',
      region: 'north',
      title: '패널1'
    },{
      xtype: 'panel',
      region: 'center',
      title: '패널2'
    }]
  });
});
cs

결과:

만약 패널1에만 height 속성을 준다면, 패널1이 height 200을 먹고 남는 나머지 공간을 패널2가 가져가게 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: 'true',
    layout: 'border',
    items: [{
      xtype: 'panel',
      region: 'north',
      height: 200,
      title: '패널1'
    },{
      xtype: 'panel',
      region: 'center',
      title: '패널2'
    }]
  });
});
cs

flex

반응형으로 레이아웃을 만들고 싶다면 flex 속성을 이용한다. flex의 value가 되는 숫자는 비율을 뜻한다. 

region과 flex를 이용해 간단하게 만든 HTML5 시멘틱태그 기본구조다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: 'true',
    layout: 'border',
    items: [{
      xtype: 'panel',
      region: 'north',
      flex: 1,
      title: 'north panel'
    },{
      xtype: 'panel',
      region: 'center',
      flex: 1,
      title: 'center panel'
    },{
      xtype: 'panel',
      region: 'east',
      flex: 1,
      title: 'east panel'
    },{
      xtype: 'panel',
      region: 'west',
      flex: 1,
      title: 'west panel'
    },{
      xtype: 'panel',
      region: 'south',
      flex: 1,
      title: 'south panel'
    }]
  });
});
cs

결과

Layout in Layout

만약 north panel 안에 또 레이아웃을 나누고 싶다면?

부모가 될 north panel의 layout을 border로 선언하고, items를 사용해 동일한 방법으로 붙여넣으면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
items: [{
      xtype: 'panel',
      region: 'north',
      flex: 1,
      title: 'north panel',
      layout: 'border',
      items:[{
        xtype: 'panel',
        region: 'east',
        flex:1,
        title: 'east in north panel'
      },{
        xtype: 'panel',
        region: 'west',
        flex:1,
        title: 'west in north panel'
      },{
        xtype: 'panel',
        region: 'center',
        flex:1,
        title: 'center in north panel'
      }]
cs

참고

region 속성으로 좌우를 나눌 때, west, east와 같이 동/서로 나누는것보다는

west, center 혹은 center,east 와 같이 부여하여 나중에 덧붙여질 컨텐츠를 대비하는 것이 낫다.

결과

연습

다음과 같이 만들어보자:



코드

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: 'true',
    layout: 'border',
    items: [{
      xtype: 'panel',
      layout:'border',
      flex:1,
      region:'north',
      title:'panel1',
      items:[{
        xtype:'panel',
        flex:1,
        region:'east',
        border:'true'
      },{
        xtype:'panel',
        flex:1,
        region:'center',
        border:'true'
      }]
    },{
      xtype: 'panel',
      flex:1,
      region:'center',
      title:'panel2'
    }]
  });
});
cs

결과


참고

Ext JS Examples

저작자표시 비영리 변경금지

'JavaScript/ ExtJS' Related Articles

티스토리툴바