ExtJS 기준 패널과 같은 도화지 역할을 하는 껍데기에 상하좌우 모든 위치에 툴바적용이 가능합니다.
이번 포스팅은 패널에 툴바를 위치별로 생성하는 법을 알아보고 추가로 생성된 툴바에 자주 사용되는
버튼들을 생성해본 후 클릭이벤트를 적용해보도록 하겠습니다.
패널 도화지를 만드는 방법은 레이아웃만들 때 다루어 보았습니다.
panel에 툴바를 만드는 속성은 tbar/lbar/rbar/fbar/bbar속성을 이용하면 쉽게 위치별로 만드는것이 가능합니다.
추가로 dockedItems라는 속성으로도 툴바생성이 가능합니다.
ExtJS사이트의 샘플에서는 dockedItems를 주로 사용하여 툴바를 만들어줍니다만
이번 포스팅에서는 위의 5가지 속성으로만 툴바를 만들어보도록 하겠습니다.
tbar : tab bar를 의미하며 도화지영역 컨텐츠 내용 상단에 위치
lbar : left bar를 의미하며 도화지영역 컨텐츠 내용 좌측에 위치
rbar : right bar를 의미하며 도화지영역 컨텐츠 내용 우측에 위치
bbar : bottom bar를 의미하며 도화지영역 컨텐츠 내용 하단에 위치
fbar : footer barf를 의미하며 bbar와 동일한 위치인 하단에 놓이지만 툴바의 배경 및 UI가 다릅니다.
다음 코드를 보시겠습니다.
패널에 툴바 적용하기 샘플코드
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 500,
height: 400,
title : '도화지의 타이틀영역',
html : '도화지의 컨텐츠영역',
//해당 속성의 KEY값만을 변경함으로써 툴바의 위치 변경이 가능
bbar : [{
xtype : 'button',
text : '버튼1'
},{
xtype : 'button',
text : '버튼2'
}]
});
})
하단에 위치시킬 bottom bar속성을 주고 xtype이 button인 컴포넌트 2개를 생성하여 위치시켜 보았습니다.
여기서 xtype은 전에 말씀드렸던것처럼 <input type=""/> 와 비슷한 개념으로
ExtJS만의 html태그라고 생각하시면 되겠습니다.
bbar(bottom toolbar)코드 실행결과
하단에 bbar 속성이 적용되여 버튼컴포넌트들이 생성이 되었습니다.
상단 코드중 bbar 라는 key값을 lbar/rbar/tbar/fbar 등을 적용하여 각각의 위치 및 결과를 확인하겠습니다.
fbar(footer toolbar)코드 실행결과
Crisp 테마 기준으로 bbar와 같은 하단 영역이더라도 fbar버튼이 조금 더 깔끔한거 같네요.
tbar(tabbar toolbar)코드 실행결과
lbar(left toolbar)코드 실행결과
rbar(right toolbar)코드 실행결과
위치별로 생성된 툴바를 알아보았습니다.
json의 key/value를 이용만을 해서 컴포넌트를 생성한다는것이 심플하지 않으신가요??
저...저만 그런가요??;;;
테마별로 툴바의 디자인이 다르니 마음에 드시는 방법으로 작업하시면 되겠습니다.
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
다음은 버튼컴포넌트 클릭시 동작하는 클릭이벤트를 알아보겠습니다.
이전포스팅에 Card Layout 예를 들었을때 handler라는 속성을 보셨을 겁니다.
2014/10/20 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox)
보통 이벤트 발생시, listeners라는 속성으로 이벤트 핸들링을 해줍니다.
버튼컴포넌트 역시 이 리스너속성을 지원해주지만
이번장에서는 리스너대신 핸들러속성을 사용하도록 하겠습니다.
리스너의 경우는 추후에 포스팅 하도록 하겠습니다.
버튼컴포넌트에 클릭이벤트를 지원해주는것이 handler입니다.
handler 내에서 이제 json객체를 사용하는것이 아닌 내부적으로 일반 자바스크립트 코드 적용이 가능합니다.
미리 정의한 툴바에 '버튼1'이라는 문구를 가진 컴포넌트에 클릭이벤트를 발생시켜
ExtJS에서 제공하는 ALERT 위젯을 띄워보도록 하겠습니다.
버튼클릭이벤트 관련 샘플코드
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 500,
height: 400,
title : '도화지의 타이틀영역',
html : '도화지의 컨텐츠영역',
//해당 속성의 KEY값만을 변경함으로써 툴바의 위치 변경이 가능
bbar : [{
xtype : 'button',
text : '버튼1',
handler : function(btn){
Ext.Msg.alert('버튼클릭', '안녕버튼1?');
}
},{
xtype : 'button',
text : '버튼2'
}]
});
})
버튼클릭 이벤트 실행결과
툴바와 버튼 클릭이벤트에 대해서 알아보았습니다.
by 개발로짜
'웹개발강좌 > ExtJS' 카테고리의 다른 글
| ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기 (4) | 2014.10.23 |
|---|---|
| ExtJS 강좌 - 메뉴버튼을 포함한 다양한 버튼컴포넌트 구현해보기 (4) | 2014.10.22 |
| ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox) (0) | 2014.10.20 |
| ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Absolute,Accordion,Border) (2) | 2014.10.20 |
| ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편 (0) | 2014.10.18 |