ExtJs 학습용 팝업 상자, 프롬프트 상자, 입력 상자 등

1. ExtJs 메시지 상자:
문법: Ext. MessageBox.alert(String title, String msg,Function fn, Obejct scope);매개변수 정의:
  

title: 제목

msg: 내용 제시

fn: 알림 상자가 닫힌 후 자동으로 호출되는 리셋 함수입니다

scope:작용역,this가 어디로 가리키는지 지정하는 데 사용됩니다

예:

  
 ExtJsAlert = function(){
    Ext.MessageBox.alert(" "，" ");
  }
 or
 ExtJsAlert = function(){
   Ext.MessageBox.alert(" "，" ",function(){
     alert(" ")
}); 
}

위의 코드를 실행하려면 JS를 원본 코드로 저장한 다음 페이지로 가져와서 추가

  <input type="button" value=" " onclick="ExtJsAlert();"/>

2. ExtJs 입력 상자
 
문법: Ext. MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline);
매개변수 정의:

title: 제목

msg: 내용 제시

fn: 알림 상자가 닫힌 후 자동으로 호출되는 리셋 함수입니다

scope:작용역,this가 어디로 가리키는지 지정하는 데 사용됩니다

Boolean/Number:true 또는 숫자인 경우 여러 줄을 입력하거나 기본 높이를 지정할 수 있습니다

예:

 ExtJsPrompt = function(){
   Ext.MessageBox.prompt(" "," ：",function(bu,txt){
     Ext.MessageBox.alert("Result"," "+bu+" ,<br>  ："+txt);
});
}
or
 ExtJsPrompt = function(){
   Ext.MessageBox.prompt(" "," ：",function(bu,txt){
     Ext.MessageBox.alert("Result"," "+bu+" ,<br>  ："+txt);
},this,300);
}

3. ExtJs 확인란
구문:
  Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope);
매개변수 정의:

title: 제목

msg: 내용 제시

fn: 알림 상자가 닫힌 후 자동으로 호출되는 리셋 함수입니다

scope:작용역,this가 어디로 가리키는지 지정하는 데 사용됩니다

예:

  ExtJsComfirm = function(){
   Ext.MessageBox.confirm(" "，" ",function(btn{
		Ext.MessageBox.alert(" ："+btn);
	});
}

4. ExtJs의 사용자 정의 메시지 상자
 
문법: Ext. MessageBox.show(Object config);config 속성 설명:

title: 메시지 상자 제목 표시줄

msg: 메시지 내용

width: 메시지 상자의 너비

multiline: 여러 줄 텍스트를 표시할지 여부

closable: 닫기 단추를 표시할지 여부

buttons: 단추

아이콘: 아이콘

fn: 리셋 함수

예:

  ExtJsCustom = function(){
    var config ={
      title:" ",
      msg:" ",
      width:400,
      multiline:true,
      closable:false,
      buttons:Ext.MessageBox.YESNOCANCEL,
      icon:Ext.MessageBox.QUESTION,
      fn:  function(btn,txt){
     Ext.MessageBox.alert("Result"," 'yes' <br>, ："+txt);
}
   };
  Ext.MessageBox.show(config);
  }

참고: ExtJs.MessageBox에서 buttons 값을 정의했습니다.아래와 같다
인용하다
OK: "확인"버튼만
CANCEL: 취소 버튼만
OKCANCEL: "확인"과 "취소"단추가 있습니다.
YESNO: 예 및 아니요 버튼이 있습니다.
YESNOCANCEL: 예, 아니오, 취소 버튼이 있습니다.
icons 값은 다음과 같습니다.
인용하다
정보: 정보 아이콘
경고: 경고 아이콘
QUESTION: 문의 아이콘
ERROR:오류 아이콘
5.ExtJs 진행 표시줄 대화 상자
진도표 대화상자도 사용자 정의 메시지 상자의 일종으로 Config를 설정할 때progress=true를 추가하면 되며 진도 알림과 같은 다른 관련 정보를 설정할 수 있습니다.
다음은 코드를 살펴보겠습니다.

 ExtJsProgress = function(){
     Ext.MessageBox.show({
        title:' ',
        msg:' ....',
        progressText:' ...',
        Width:300,
        progress:true,
        closable:false
    });
   var f = function(v){
       return function(){
         if(v == 12){
             Ext.MessageBox.hide();
             Ext.MessageBox.alert(' ',' !');
          }else{
              var i = v/11;
             Ext.MessageBox.updateProgress(i,Math.round(100*i)+'% ');
           }
       };
  };
   for(var i=0; i<13;i++){
     setTimeout(f(i),i*500);
   }
  }

상기 코드에서 ProgressText 속성은 진도표가 굴러가기 전의 최초의 텍스트로 굴러가는 프로세스는 updateProgress(Numbervalue, StringprogressText) 방법으로 정의되고 매개 변수value는 0-1 사이의 소수로 진도율을 나타낸다.progressText는 진행 표시줄이 굴러가는 과정에서 텍스트 알림 정보를 표시합니다.
6.ExtJs 메시지 상자 애니메이션 효과
코드 바로 보기

   ExtJsAnimal = funciton(){
       var config = {
          title:" ",
          msg:" ， ",
          width:400,
          multiline:true,
          closable:false,
          buttons:Ext.MessageBox.YESNOCANCEL,
          icon:Ext.MessageBox.QUESTION,
          animEl:"fly"
        };
        Ext.MessageBox.show(config);
    }

html 코드에 추가

    <input type="button" value="Animal" id="fly" onclick="ExtJsAnimal();"/>
 id=fly animEL