ExtJS : MessageBox

ExtJS : MessageBox

alert을 비롯한 여러 메시지창에 대해 알아본다.

사용하기 전에, ExtJS에서 쓰이는 메시지창을 불러오기 위한 Ext.Msg 는 싱글톤 인스턴스singleton instance기 때문에 create()를 사용할 필요가 없다.

따라서 사용하고자 하는 곳에서 곧바로 불러오면 된다.

alert

기본 alert 창이다. 

JavaScript의 alert()은 확인버튼을 누르기 전까지 다음 라인의 동작이 이루어지지 않지만

Extjs의 alert은 사용자의 반응을 기다리지 않는다. 즉 다음 로직이 곧바로 실행된다. 

따라서 따로 function을 구현해 return으로 제어해야 하는 등의 작업이 필요하다.

타이틀과 메시지 내용을 각각 파라미터로 넣으면 된다.

Ext.onReady(function(){
  //1. ExtJS Alert
  Ext.Msg.alert("title","message");
});

confirm

alert창과 사용법이 같다. 

Ext.Msg.confirm("title","message");

JavaScript의 confirm창은 boolean 값이지만 ExtJs에서는 yes/no의 text로 받는 것이 차이점이다.

따라서 확인/취소시 로직을 위해서는 다음과 같이 제어한다.

  Ext.Msg.confirm("title","message", function(btn){
    if(btn=='yes'){
      console.log('ok');
    }else{
      console.log('why not');
    }
  });

toast

토스트메시지는 안드로이드 등 모바일에서 자주 쓰이는, 잠깐 나왔다 자동으로 사라지는 창을 뜻한다.

Ext.toast('toast');

위치변경

기본으로 토스트메시지가 나오는 곳은 위쪽 가운데이며, align 속성을 이용해 제어한다.

각각 t는 top, b는 bottom, r은 right, l은 left의 약자이므로 직관적으로 알 수 있다.

  Ext.toast({
    html: 'toast',
    //t, tr, tl, b, br, bl
    align: 'b'
  });

MessageBox

메시지박스는 직접 커스터마이징이 가능한 메시지창이다.

아래처럼 기본으로 선언만 하면 위처럼 아무것도 없는 메시지창을 띄울 수 있다.

  Ext.MessageBox.show({
    msg: 'MessageBox',
    title: 'title'
  });

icon

MessageBox에 아래와 같은 아이콘들을 넣을 수 있다.

미리 정의된 상수이므로 그대로 붙여넣기 하면 된다.

위는 Ext.MessageBox.INFO 를 사용한 모습이다.

• Ext.MessageBox.QUESTION
• Ext.MessageBox.INFO
• Ext.MessageBox.ERROR
• Ext.MessageBox.WARNING

  Ext.MessageBox.show({
    msg: 'MessageBox',
    title: 'title',
    icon: Ext.MessageBox.INFO
  });

buttons

buttons 속성을 이용해 버튼들도 조합할 수 있다. 

buttons도 마찬가지로 미리 정의된 상수들이 존재한다.

사용하고자 하는 버튼 수에 맞춰 붙여넣으면 된다.

위는 YES/NO/CANCLE 상수를 사용한 것이다.

• Ext.MessageBox.OK
• Ext.MessageBox.CANCEL
• Ext.MessageBox.OKCANCEL
• Ext.MessageBox.YES
• Ext.MessageBox.NO
• Ext.MessageBox.YESNO
• Ext.MessageBox.YESNOCANCEL

  Ext.MessageBox.show({
    msg: 'MessageBox',
    title: 'title',
    icon: Ext.MessageBox.INFO,
    buttons: Ext.MessageBox.YESNOCANCEL
  });

custom

yes나 no, cancle이 아니라 내가 직접 입력한 텍스트로 바꾸고 싶다면 아래와 buttonText 속성으로 제어한다.

  Ext.MessageBox.show({
    msg: 'MessageBox',
    title: 'title',
    icon: Ext.MessageBox.INFO,
    buttonText:{
      ok: '어',
      no: '아니',
      yes: '응응',
      cancel: '싫어'
    }
    //buttons: Ext.MessageBox.YESNOCANCEL
  });

function

이벤트는 fn으로 제어한다. 

만약 내가 buttonText를 변경했다면, 위에서 설정한 key값이 나오게 된다.

  Ext.MessageBox.show({
    msg: 'MessageBox',
    title: 'title',
    icon: Ext.MessageBox.INFO,
    buttons: Ext.MessageBox.YESNOCANCEL,
    fn: function(btn){
      console.log(btn);
    }
  });

즉 내가 방금 만들었던 이 메시지창에서 '싫어'버튼을 클릭했다면,

아래와 같이 '싫어'의 키값인 'cancel' 텍스트가 나오는 것을 확인할 수 있다.