ExtJS6 여덟번째강의 - ExtJS 6 메시지상자 다뤄보기(Create a message box)

▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼

https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ

메시지관련 컴포넌트는 Ext.create("클래스명") 으로 지정하지 않고 클래스명.함수() 형태로 구현을 해야함

이유는 싱글톤으로 정의된 클래스일 경우, 객체생성을 할 수 없고, 그냥 함수처럼 사용해주면 됨.

※ 강의에서 따로 생각되실거 같아서 정정해서 정리합니다.

Ext.Msg클래스에서 alert과 confirm 그리고 Ext.MessageBox에서 커스텀 메시지박스를 나눠서 알려드렸는데 둘다 동일한 싱글톤 클래스입니다.

Ext.Msg( = Ext.MessageBox) 클래스에서 제공하는 기본적인 alert, confirm 이용하여 메시지 상자 만들어보기

alert과 confirm 함수는 같은 Ext.Msg 클래스에 속해 있습니다.

첫번째 parameter

ttitle 영역에 해당되는 문구를 정의

두번째 parameter

body영역에 해당되는 메시지 내용을 정의

세번째 parameter

메시지 상자의 버튼을 클릭될 때 실행되는 함수부분

주의사항 - ExtJS 관련 모든 메시지상자 컴포넌트는 UI만 생성되고 다음라인의 코드가 이어서 호출이 되므로, 메시지상자 함수 호출 다음 return을 작성해주어야 하며, 버튼클릭 함수영역에 클릭 후, 진행되는 로직을 정의해주어야함

Ext.toast 함수로 토스트창 띄워보기

토스트창은 보통 앱에서 푸쉬나 어떠한 알림을 나타날때 쓰는 메시지 상자인대, ExtJS는 토스트 메시지 상자를 지원함

toast함수 호출시 , 첫번째 parameter를 문자열로 정의한다면, 단순하게 메시지내용만을 출력하게 되며, 중앙 상단에서 나타났다 사라지게 됩니다.

만약, 표출 위치를 변경시켜주고자 할 경우, toast 의 첫번째 parameter를 JSON Object 구조로 정의해서 각각의 confirg 속성을 정의해줍니다.

보통 Object 형식에서 메시지내용 관련 속성은 html속성에 정의해주면 됩니다. 물론, 문자열로 HTML 코르를 작성해주셔도 무방합니다.

또한, 위치 변경의 속성은 align 이라는 속성이며, 정의할 수 있는 value 값은 아래와 같습니다.

t / tr / tl / b / br / tl

각 특정 약어에 대한 조합이므로 각각의 약어는 아래와 같습니다.

t : top

b : bottom

r : right

l : left

Ext.MessageBox(= Ext.Msg) 로 사용자 정의 메시지상자 만들기

show() 함수를 이용하며, show의 첫번째 parameter를 JSON Object 형태로 정의해줍니다.

show함수에 정의되는 JSON Objet의 config 속성

title : 메시지상자의 제목에 해당 

msg : 메시지상자의 메세지 내용에 해당

fn : 버튼 클릭시, 응답하는 함수

icon : 메시지상자에 나타내는 아이콘 이미지

Ext.MessageBox.QUESTION - 질문

Ext.MessageBox.INFO - 정보

Ext.MessageBox.ERROR - 에러

Ext.MessageBox.WARNING - 경고

buttons : 버튼의 종류

Ext.MessageBox.OK

Ext.MessageBox.CANCEL

Ext.MessageBox.OKCANCEL

Ext.MessageBox.YES

Ext.MessageBox.NO

Ext.MessageBox.YESNO

Ext.MessageBox.YESNOCANCEL

buttons를 대체하기 위한 속성은 buttonText 속성에 value값으로 Json Object 형식으로 지정

지정된 속성갯수에 맞춰서 버튼갯수가 생성됨

buttonText에서 사용할 수 있는 config 속성은 ok / no / yes / cancel 임

value값은 문자열로 지정하며, 버튼의 문구에 해당