[ExtJS강좌 5] 다이얼로그창 띄우기

흔히 자바스크립트에서 다음과 같은 경고창들을 많이 띄워줬을 것이다.

alert("경고창"),confirm("컨펌창") 과 같은 경고창을 흔히들 많이 띄워봤을 것이다.

프롬프트 다이얼로그도 있지만 해당 부분은 자주 쓰는 다이얼로그가 아니므로 건너 뛰도록 

하겠다.

넣어주는 동시에 다이얼로그 창에 옵션을 줘서 아이콘들도 넣어보자!! 

기본 alert 창은 전에 1장에서 hello world 예제를 띄워봤을때 한번 접해봤었다.

기억 안나시는 분들을 위하여!

Ext.Msg.alert('타이틀영역', '헬로우 월드')

alert메시지와 비슷한대 좀더 RIA스럽다~ *-_-*

자 이제 icon을 넣어보고 버튼 옵션들을 변경하면서 테스트 해보자

우선 기본적인 틀은

Ext.Msg.show({

});

함수다

Ext.Msg.alert는 내부에 타이틀,내용이 들어갔었다.

그러나, Ext.Msg.show는 할경우 옵션값들은

title, msg, icon, buttons들이 있다

title : '경고창 상단 타이틀 내용'

msg : '경고창에 뿌려줄 내용;

icon : '경고창에 표출해줄 아이콘'

icon에 들어갈 상수값

Ext.Msg.ERROR

Ext.Msg.INFO,

Ext.Msg.QUESTION,

Ext.Msg.WARNING

buttons : 확인버튼, 확인/취소 버튼 등 ..

buttons에 들어갈 상수값

Ext.Msg.CANCEL

Ext.Msg.OK

Ext.Msg.YESNO

Ext.Msg.YESNOCANCEL

있다.

위에 상수값중에서 일부만 적용해서 화면에 출력해보겠다

본인이 출력할 다이얼로그 창은 alert/confirm이랑 같은 화면을 띄워보도록 하겠다

나머지 옵션들은 바꿔가면서 눈으로 확인해 보시길..

//1. alert("얼랏메시지") 와 같은 화면
Ext.onReady(function(){
	Ext.Msg.show({
		title : 'alert',
		msg : '얼랏메시지',
		icon : Ext.Msg.INFO,
		buttons : Ext.Msg.OK
	});
});
//2. confirm("컨펌메시지")와 같은 화면
Ext.onReady(function(){
         Ext.Msg.show({
		title : 'confirm',
		msg : '컨펌메시지',
		icon : Ext.Msg.QUESTION,
		buttons : Ext.Msg.YESNO
	});
});

1번,2번을 번갈아 가면서 소스적용을 하면서 띄워보자 

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!