ExtJS : 기본문법 & 레이아웃
ExtJS : 기본문법 & 레이아웃Basic예를들어 HTML에서 다음과 같은 코드가 있다고 가정하자.1234 Colored by Color Scriptercs 비유하자면 이것은 라는 큰 도화지에 태그 2개를 그린 것이다.ExtJS에서는 실제로
kutar37.tistory.com
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.
사용
|
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 |
결과
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 속성을 가진다.
따라서 별도의 레이아웃 속성을 지정하지 않으면 컴포넌트들이 우측으로 붙지 않고 위에서 아래로 붙는다.
이중구조
|
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 와 같이 부여하여 나중에 덧붙여질 컨텐츠를 대비하는 것이 낫다.
결과
연습
다음과 같이 만들어보자:
코드
|
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 |
결과
참고
'Dev > ExtJS' 카테고리의 다른 글
| [ExtJS] HTML 요소(DOM) 선택하기 / GET, QUERY, SELECT (0) | 2024.03.22 |
|---|---|
| [ExtJS] UP , DOWN / 자식 요소 , 부모 요소 찾기 (0) | 2024.03.22 |
| [ExtJS] ID / 속성값 으로 검색하여 FORM 찾기 (0) | 2024.03.22 |
| EmptyText가 form과 함께 같이 저장될 때 (0) | 2022.12.22 |
| [ExtJS] 2-2. Spring boot로 개발 환경 구성 및 API 연동 테스트 2 (0) | 2021.06.15 |