ExtJs2.0 학습 시리즈(1) --Ext.MessageBox

출처:
www.cnblogs.com/qianxudetianxia
다들 아시다시피 extjs를 처음 시작했을 때 어려움이 많았기 때문에 저는 초보자가 입문한 후에 이 시리즈의 글을 준비했습니다.
개인적으로 extjs로 백스테이지를 하는 것이 괜찮다고 생각합니다. 레이아웃이 비교적 완벽합니다!
　　1.Ext.MessageBox.alert () 메서드
네 개의 매개 변수가 있는데, 간단하게 말하자면, 주로 앞의 세 개의 매개 변수를 소개한다.
　　　

alert( title , msg , function(){} )

　　
그 중에서 title, msg는 필수 매개 변수이고,function는 선택할 수 있는 매개 변수입니다. 팝업 창을 닫은 후에 터치합니다.

Ext.MessageBox.alert("title","msg");
　　
　Ext.MessageBox.alert("title","msg",function(){alert(" ！")});

　　2.Ext.MessageBox.confirm () 메서드
기본적으로 alert () 방법과 똑같다.
참고:

Ext.MessageBox.confirm("title","msg",function(e){alert(e);});

이 매개 변수 e는 무엇입니까?이것은 당신이 클릭한 팝업 상자의 단추의 값입니다. 세 가지 값: yes, no, cancel.Alert () 방법도 마찬가지지만 ok, cancel 두 가지 값만 있습니다.
　　3.Ext.MessageBox.prompt () 메서드
앞에 있는alert 방법보다 한 개의 반환값과 여러 줄 이상의 매개 변수가 있습니다.

Ext.MessageBox.prompt("title","msg");
　　
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);});
// "qianxudetianxia", ok ， ok-qianxudetianxia　　
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true);
//true ，this 

　　4.Ext.MessageBox.show() 메서드
기능이 매우 강하여 config 설정 형식을 채택하여 앞의 방법보다 사용하기가 더욱 편리하다.
가장 많이 사용되는 구성 매개변수는 다음과 같습니다.
　　1.animEl: 대화상자가 튀어나오고 닫힐 때의 애니메이션 효과, 예를 들어'id1'으로 설정하면 id1에서 튀어나와 애니메이션이 생기고 수축은 반대로
　　2.buttons: 팝업 상자 단추의 설정은 주로 다음과 같습니다. Ext.Msg.OK,
　　　

　
        Ext.Msg.OKCANCEL,
　　　　Ext.Msg.CANCEL,
　　　　Ext.Msg.YESNO,
　　　　Ext.Msg.YESNOCANCEL

너도 버튼 위의 글자를 사용자 정의할 수 있다. {"ok", "나는 원래 ok였어"}.
false로 설정하면 단추가 표시되지 않습니다.
　　3.closable:false이면 오른쪽 상단의 작은 포크를 표시하지 않고 기본적으로true입니다.
　　4.msg: "메시지의 내용"
　　5.제목
　　6.fn: 팝업 상자를 닫고 실행하는 함수
　　7.icon: 팝업 상자 내용 앞에 있는 아이콘입니다.
   

Ext.MessageBox.INFO，
    Ext.MessageBox.ERROR,
　　Ext.MessageBox.WARNING,
　　Ext.MessageBox.QUESTION

　　8.width: 팝업 상자의 너비, 단위 없음
　　9.prompt:true로 설정하면 팝업 상자에 입력 상자가 있습니다
　　10.multiline:true로 설정하면 팝업 상자에 여러 줄 입력 상자가 있습니다.
　　11.progress:true로 설정하고 진도표를 표시합니다.
　　12.progressText: 진행 표시줄에 표시된 글자
　　13.wait:true로 설정하고progress 동적 표시
　　14.waitConfig:progress 표시를 제어하기 위한 매개 변수 구성
example:

Ext.MessageBox.show({
　　title:" ",
　　msg:" ",
　　buttons:{"ok":" OK "},
　　fn:function(e){alert(e);},
　　animEl:"test1",
　　width:500,
　　icon:Ext.MessageBox.INFO,
　　closable:false,
　　progress:true,
　　wait:true,
　　progressText:" "
　//prompt:true
　//multiline:true
});

　　4.Ext.MessageBox.show()의 진도표 사용
우선 예외적인 두 가지 방법을 알아야 합니다. Ext. MessageBox.Hide () 및 Ext.MessageBox.updateProgress(value, "ProgressText", "msg")(세 개의 매개 변수, 이름을 보면 뜻을 알 수 있음),
value는 0-1 사이의 숫자로 진도표의 진도를 표시합니다.
첫 번째: (진도의 크기를 통해 진도를 제어합니다. 전체 진도는 1)

Ext.get("btn1").on(
　　　　　"click",
　　　　　function(){
　　　　　　Ext.MessageBox.show({
　　　　　　　　title:"df",
　　　　　　　　msg:"dfd",
　　　　　　　　progress:true,
　　　　　　　　width:300,
　　　　　　　　closable:true
　　　　　　});
　　　　　　varf=function(v){
　　　　　　　returnfunction(){
　　　　　　　　if(v==12)
　　　　　　　　{
　　　　　　　　　Ext.MessageBox.hide();
　　　　　　　　　//alert(" ！");
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　vari=v/11;
　　　　　　　　　Ext.MessageBox.updateProgress(i,Math.round(100*i)+"%completed",i);
　　　　　　　　}
　　　　　　　}
　　　　　　}
　　　　　　for(vari=1;i<13;i++)
　　　　　　{
　　　　　　　setTimeout(f(i),i*500);// ， 500*i 500ms 
　　　　　　}
　　　　　}
　);

두 번째: (고정 시간을 통해 진행 상태 로드 제어)

Ext.get("btn1").on(
　　　　　"click",
　　　　　function(){
　　　　　　Ext.MessageBox.show({
　　　　　　　　title:" ",
　　　　　　　　msg:"5s ",
　　　　　　　　progress:true,
　　　　　　　　width:300,
　　　　　　　　wait:true,
　　　　　　　　waitConfig:{interval:600},//0.6s 
　　　　　　　　closable:true
　　　　　　});
　　　　　　setTimeout(function(){Ext.MessageBox.hide()},5000);//5 
　　　　　}

마지막으로 그 waitConfig의 매개 변수에 대한 설명은 다음과 같습니다.
　　1.interval:진도 주파수
　　2.duration: 진도를 실행하는 지속 시간, 이 시간을 초과하면interval이 효력을 잃고 더 이상 진도 효과가 나타나지 않지만 진도광도 사라지지 않습니다.
　　3.fn:duration의 시간이 지나면 실행되는 함수
따라서 위의 시간 제어를 통해 진도를 제어하는 또 다른 방법은 다음과 같다.
　　

Ext.get("btn1").on(
　　　　　"click",
　　　　　function(){
　　　　　　Ext.MessageBox.show({
　　　　　　　　title:" ",
　　　　　　　　msg:"5s ",
　　　　　　　　progress:true,
　　　　　　　　width:300,
　　　　　　　　wait:true,
　　　　　　　　waitConfig:{
　　　　　　　　　　　　　　　interval:600,
　　　　　　　　　　　　　　　duration:5000,
　　　　　　　　　　　　　　　fn:function(){
　　　　　　　　　　　　　　　　Ext.MessageBox.hide();// 
　　　　　　　　　　　　　　　}},
　　　　　　　　closable:true
　　　　　　});
　　　　　　//setTimeout(function(){Ext.MessageBox.hide()},5000);
　　　　　}
　);

효과가 같다.
Message Box 클래스는 일단 이만큼!다음 장을 함께 기대하면서...