Extjs彈出框

1.ExtJs之消息框：
  語法：Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope);   參數定義： 
  

• title: 標題
• msg: 提示內容
• fn: 提示框關閉之後自動調用的回調函數
• scope: 作用域，用於指定this指向哪裏

[javascript] view plaincopy

1. Ext.MessageBox.alert("提示框"，"這是一個提示框");  
2. Ext.MessageBox.alert("提示框"，"這是一個提示框",function(){    
3.      alert("提示框關閉")    
4. });  

2. ExtJs 之輸入框 
  語法：Ext.MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline,String defaulttext); 
  參數定義：

• title: 標題
• msg: 提示內容
• fn: 提示框關閉之後自動調用的回調函數
• scope: 作用域，用於指定this指向哪裏
• Boolean/Number:如果爲true或爲數字，則表示允許輸入多行或者指定默認高度
• defaulttext ：輸入框默認文本內容

[javascript] view plaincopy

1. Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){    
2.      Ext.MessageBox.alert("Result","你點擊的是"+bu+"按鈕,
    輸入的內容爲："+txt);    
3. },this,300); 
   

3.ExtJs之確認框 
語法： 
  Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope); 
  參數定義： 
  

• title: 標題
• msg: 提示內容
• fn: 提示框關閉之後自動調用的回調函數
• scope: 作用域，用於指定this指向哪裏

[javascript] view plaincopy

1. Ext.MessageBox.confirm("確認"，"請點擊下面的按鈕作出選擇",function(btn{    
2.         Ext.MessageBox.alert("你單擊的按鈕是："+btn);    
3. }); 
   

4. ExtJs之自定義消息框 
  語法： 
    Ext.MessageBox.show(Object config);  config屬性說明： 

• title : 消息框標題欄
• msg:消息內容
• width:消息框的寬度
• multiline: 是否顯示多行文本
• closable:是否顯示關閉按鈕
• buttons:按鈕
• icon:圖標
• fn:回調函數

[javascript] view plaincopy

1. var config ={    
2.     title:"自定義對話框",    
3.     msg:"這是一個自定義對話框",    
4.     width:400,    
5.     multiline:true,    
6.     closable:false,    
7.     buttons:Ext.MessageBox.YESNOCANCEL,    
8.     icon:Ext.MessageBox.QUESTION,    
9.     fn:  function(btn,txt){    
10.    Ext.MessageBox.alert("Result","你點擊了'yes'按鈕
    ,輸入的值是："+txt);    
11.     
12.  };    
13. Ext.MessageBox.show(config); 
    

注意： 在ExtJs.MessageBox中已經定義了buttons的取值.如下 

引用

OK：只有"確定"按鈕 
CANCEL:只有"取消"按鈕 
OKCANCEL:有"確定"和"取消"按鈕 
YESNO: 有"是"和"否"按鈕 
YESNOCANCEL：有"是"、"否"和"取消"按鈕 

icons取值如下 

引用

  INFO:信息圖標 
  WARNING:警告圖標 
  QUESTION:詢問圖標 
  ERROR:錯誤圖標

5.ExtJs之進度條對話框 

    進度條對話框也是自定義消息框的一種，只是在配置Config時添progress=true即可,同時在設置其他相關信息，比如進度提示。 

[javascript] view plaincopy

1. Ext.MessageBox.show({    
2.        title:'請等待片刻',    
3.        msg:'正在加載項目....',    
4.        progressText:'正在初始化...',    
5.        Width:300,    
6.        progress:true,    
7.        closable:false    
8.    });    
9.   var f = function(v){    
10.       return function(){    
11.         if(v == 12){    
12.             Ext.MessageBox.hide();    
13.             Ext.MessageBox.alert('完成','所有項目加載完成!');    
14.          }else{    
15.              var i = v/11;    
16.             Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');    
17.           }    
18.       };    
19.  };    
20.   for(var i=0; i<13;i++){    
21.     setTimeout(f(i),i*500);    
22.   } 
    

解 析上述代碼中ProgressText屬性是進度條滾動之前最初的文本，滾動進程由updateProgress(Number value,String progressText)方法來定義,參數value是從0-1之間的小數，表示進度百分比;progressText則表示進度條滾動過程中的文本提 示信息。

6.ExtJs之消息框動畫效果 

[javascript] view plaincopy

1. var config = {    
2.        title:"飛出的消息框",    
3.        msg:"這是一個自定義對話框，是飛出來的哦",    
4.        width:400,    
5.        multiline:true,    
6.        closable:false,    
7.        buttons:Ext.MessageBox.YESNOCANCEL,    
8.        icon:Ext.MessageBox.QUESTION,    
9.        animEl:"fly"    
10.      };    
11.      Ext.MessageBox.show(config); 
    

PS：彈框的寬度都是固定的，很多時候都會影響美觀，相信很多人都會想着如何改變彈框的寬度。

Ext源碼
1、progress : function(title, msg, progressText){
            this.show({
                title : title,
                msg : msg,
                buttons: false,
                progress:true,
                closable:false,
                minWidth: this.minProgressWidth,
                progressText: progressText
            });
            return this;
        },
   wait : function(msg, title, config){
            this.show({
                title : title,
                msg : msg,
                buttons: false,
                closable:false,
                wait:true,
                modal:true,
                minWidth: this.minProgressWidth,
                waitConfig: config
            });
            return this;
        },
修改寬度的代碼爲：Ext.MessageBox.minProgressWidth = 400;
例：
        Ext.MessageBox.minPromptWidth = 400;
        Ext.MessageBox.prompt("補充需求信息", "需求分析", analysisreq, this, 250, vanalysisReq);


原文引自：http://blog.sina.com.cn/s/blog_4d5d065f0101bctt.html