( 현 포스팅은 이전 포스팅 "[ ExtJS ] Button을 만들고 Event Listeners 달기." 에서 사용한 test.html 파일을 사용한다. )
이전 포스팅에선 간단한 레이아웃에 버튼을 달고 이벤트를 적용시켜보았다.
이번엔 자주 이용하는 기능을 버튼 등으로 만들어 나란히 모아놓은 메뉴바인 Toolbar 를 추가해,
각 버튼을 좀 더 작관적으로 나누고 위치를 지정해보자.
ExtJS 는 panel 에 Toolbar 를 만드는 속성으로 다음과 같은 방법 등을 지원한다.
1. dockedItems
2. Xbar
이제 순서대로 사용해 Toolbar 를 만들어 보자.
현재 기존의 test.html 의 코드는 아래와 같다.
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ExtJS Test</title>
<link href="../classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo : Ext.getBody(),
layout : 'vbox',
items:[
{
xtype: 'textfield',
fieldLabel: '이름'
},
{
xtype: 'textfield',
fieldLabel: '성별'
},
{
xtype: 'textfield',
fieldLabel: '생년월일'
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'First Button',
handler: function() {
Ext.Msg.alert("First Button Click", "첫 번째 버튼 클릭");
}
},
{
xtype: 'button',
text: 'Second Button',
listeners: {
click: function() {
Ext.Msg.alert("Second Button Click", "두 번째 버튼 클릭");
}
}
}
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>
dockedItems
ExtJS 는 도구를 모아놓은 영역을 기본적으로 제공한다.
사용법은 아래와 같다.
dockedItems: [
{
xtype: 'toolbar',
dock: 'top', //top, left, right, bottom
items: [
{
xtype: ...
text: ...
}
]
}
]
이를 기존의 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"> -->
<link href="../classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo : Ext.getBody(),
items:[
{
xtype: 'textfield',
fieldLabel: '이름'
},
{
xtype: 'textfield',
fieldLabel: '성별'
},
{
xtype: 'textfield',
fieldLabel: '생년월일'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Top Button'
}
]
},
{
xtype: 'toolbar',
dock: 'left',
items: [
{
xtype: 'button',
text: 'Left Button'
}
]
},
{
xtype: 'toolbar',
dock: 'right',
items: [
{
xtype: 'button',
text: 'Right Button'
}
]
},
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Bottom Button 1'
},
{
xtype: 'button',
text: 'Bottom Button 2'
}
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>
위 처럼 xtype 으로 toolbar 를 주어 생성할 수 있고,
dock 으로 top(상), bottom(하), left(좌), right(우) 로 툴바의 위치를 지정할 수 있다.
실행결과는 아래와 같다.
이전 포스팅과 달리 Toolbar 영역이 생겼음을 확인할 수 있다.
그럼 다음으로는 Xbar 를 이용해서 toolbar 를 생성해보자.
Xbar
위에서 다룬 dockedItems 가 도구 모음의 영역이며, 후에 dock 으로 위치를 배정한다는걸 알았다.
반면 Xbar 는 처음부터 각 위치가 지정되있는 toolbar 를 제공한다.
Xbar 의 종류로는 tbar, bbar, lbar, rbar, fbar 가 있고 하나하나 살펴보도록 하자.
먼저, test.html 의 dockedItems 부분을 지우고 bbar 부터 적용해보자.
bbar
Bottom Bar 를 의미하며 컨텐츠 내 하단에 위치하는 Toolbar 이다.
<!DOCTYPE html>
<html lang="en">
<head>
.
.
.
<script type="text/javascript">
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo : Ext.getBody(),
items:[
.
.
.
],
//Bottom Bar
bbar: [
{
xtype: 'button',
text: 'Bottom Button'
}
]
});
});
</script>
</head>
<body>
</body>
</html>
bbar 실행 결과
fbar
Footer Bar 를 의미하며 컨텐츠 내 하단에 위치하는 점에서 bbar 와 거의 동일하지만,
bbar 와는 달리 기본으로 오른쪽 배치와 style 이 적용되어져 있다.
<!DOCTYPE html>
<html lang="en">
<head>
.
.
.
<script type="text/javascript">
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo : Ext.getBody(),
items:[
.
.
.
],
//Footer Bar
fbar: [
{
xtype: 'button',
text: 'Footer Button'
}
]
});
});
</script>
</head>
<body>
</body>
</html>
fbar 실행 결과
tbar, lbar, rbar
앞에서부터 순서대로 Top Bar, Left Bar, Right Bar 를 의미하며,
컨텐츠 내 상단, 좌측, 우측에 위치한 Toolbar 이다.
<!DOCTYPE html>
<html lang="en">
<head>
.
.
.
<script type="text/javascript">
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo : Ext.getBody(),
items:[
.
.
.
],
//Top Bar
tbar: [
{
xtype: 'button',
text: 'Top Button'
}
],
//Left Bar
lbar: [
{
xtype: 'button',
text: 'Left Button'
}
],
//Right Bar
rbar: [
{
xtype: 'button',
text: 'Right Button'
}
]
});
});
</script>
</head>
<body>
</body>
</html>
tbar, lbar, rbar 실행 화면
이전 포스팅과 동일하게 버튼에 이벤트도 달아보자.
위 버튼들 중 LeftButton 에만 이벤트를 걸어본다.
<!DOCTYPE html>
<html lang="en">
<head>
.
.
.
<script type="text/javascript">
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo : Ext.getBody(),
items:[
.
.
.
],
//Top Bar
tbar: [
{
xtype: 'button',
text: 'Top Button'
}
],
//Left Bar
lbar: [
{
xtype: 'button',
text: 'Left Button',
//event 추가
listeners: {
click: function() {
Ext.Msg.alert("Left Button", "왼쪽 버튼을 클릭했음");
}
}
}
],
//Right Bar
rbar: [
{
xtype: 'button',
text: 'Right Button'
}
]
});
});
</script>
</head>
<body>
</body>
</html>
그러고나서 Left Button 을 클릭하면 아래처럼 정상적으로 이벤트가 발생한다.
'Coding Story > ExtJS' 카테고리의 다른 글
| [ ExtJS ] 버튼을 클릭해 팝업창 띄우기 ExtJS Popup (2) | 2020.11.04 |
|---|---|
| [ ExtJS ] Button을 만들고 Event Listeners 달기. (0) | 2020.11.03 |
| [ ExtJS ] ExtJS의 레이아웃 Layout (0) | 2020.11.03 |
| [ ExtJS ] ExtJS 기초 문법, 그리고 Border Layout. (0) | 2020.11.02 |
