ExtJs4 筆記(6) 消息對話框

ExtJs4ExtJs4筆記（6）Ext.MessageBox消息對話框本篇演示消息對話框的用法，ExtJs封裝了可能用到的各類消息框，并支持自定義的配置。如下是用到的html：?1?123456789<h1>各種消息框</h1><divid="div1"class="content"><buttonid="bt1"type="button">Confirm</button><buttonid="bt2"type="button">Prompt</button><buttonid="bt3"type="button">DIY</button><buttonid="bt4"type="button">進度條</button><buttonid="bt5"type="button"2</button><buttonid="bt6"type="button">wait</button></div>一、警告對話框和確認對話框一、警告對話框和確認對話框展示一個帶“是”，“否”按鈕的確認對話框。當單擊按鈕時，執(zhí)行回調(diào)函數(shù)，獲取按鈕類型，并彈出一個警告對話框。?1?12345Ext.get("bt1").on("click",function(){Ext.MessageBox.confirm("標題","詳細信息內(nèi)容",function(btn){Ext.Msg.alert("提示","你點擊了"+btn+"按鈕");});});效果展示：二、輸入對話框二、輸入對話框展示一個帶文本框的對話框，可以供用戶錄入。單擊按鈕后可以獲取文本框的內(nèi)容。?1?12345Ext.get("bt2").on("click",function(){Ext.MessageBmpt("標題","詳細信息內(nèi)容",function(btn,text){6Ext.Msg.alert("提示","你點擊了"+btn+"按鈕,獲取的文本："+text);7},8this,9true, //表示文本框為多行文本框10"初始文本");11});效果展示：三、自定義DIY對話框三、自定義DIY對話框展示一個自定義的對話框，可以定義圖標樣式，按鈕組的類型，是否帶文本框，是否帶進度條等信息。?1?1234567Ext.get("bt3").on("click",function(){Ext.MessageBox.show({title:"標題",msg:"詳細信息內(nèi)容",buttons:Ext.MessageBox.YESNOCANCEL,multiline:false,closable:false,//對話框的按鈕組合//有文本框時，是否為多行文本框//是否可關(guān)閉8prompt:true,9icon:Ext.MessageBox.WARNING,10iconCls:"add16",11width:400,12proxyDrag:true,13value:"初始文本",14progress:true,15progressText:"加載中..",16animateTarget:"bt3"17});18});效果展示：四、加載進度條對話框四、加載進度條對話框展示一個帶加載進度條的對話框，提示當前執(zhí)行任務(wù)的進度信息。?1?12345678910111213Ext.get('bt4').on('click',function(){Ext.MessageBox.show({title:'加載窗口',msg:'詳細信息內(nèi)容',progressText:'加載中...',width:300,progress:true,closable:false,animateTarget:'bt4'});//模擬加載環(huán)境varf=function(v){14returnfunction(){15if(v==12){16Ext.MessageBox.hide();17Ext.Msg.alert("提示","加載完畢！");18}else{19vari=v/11;23};24for(vari=1;i<13;i++){25setTimeout(f(i),i*200);26}27});202122202122Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%完成')}};五、等待進度條對話框五、等待進度條對話框展示等待進度條的對話框，提示用戶當前正在等待某一任務(wù)執(zhí)行。?1?12345678910111213Ext.get('bt5').on('click',function(){Ext.MessageBox.show({msg:'正在保存數(shù)據(jù)..',progressText:width:300,wait:true,waitConfig:{interval:200},icon:'download',animateTarget:'bt5'});setTimeout(function(){Ext.MessageBox.hide();Ext.Msg.alert("提示","保存完畢！");1415},3000);1415},3000);});六、基本的等待對話框六、基本的等待對話框這里演示基本的等待對話框的實現(xiàn)方式。?1?123456789Ext.get('bt6').on('click',function(){Ext.MessageBox.wait("詳細信息內(nèi)容","標題",{interval:100//進度條加載速度});setTimeou