標籤：style io ar color os sp java for strong
1.ExtJs之訊息框：
文法：Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope); 參數定義：
- title: 標題
- msg: 提示內容
- fn: 提示框關閉之後自動調用的回呼函數
- scope: 範圍，用於指定this指向哪裡
[javascript] view plaincopy
- Ext.MessageBox.alert("提示框"，"這是一個提示框");
- Ext.MessageBox.alert("提示框"，"這是一個提示框",function(){
- alert("提示框關閉")
- });
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
- 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指向哪裡
[javascript] view plaincopy
- Ext.MessageBox.confirm("確認"，"請點擊下面的按鈕作出選擇",function(btn{
- Ext.MessageBox.alert("你單擊的按鈕是："+btn);
- });
4. ExtJs之自訂訊息框
文法： Ext.MessageBox.show(Object config); config屬性說明：
- title : 訊息框標題列
- msg:訊息內容
- width:訊息框的寬度
- multiline: 是否顯示多行文本
- closable:是否顯示關閉按鈕
- buttons:按鈕
- icon:表徵圖
- fn:回呼函數
[javascript] view plaincopy
- 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取值如下
引用 INFO:資訊表徵圖 WARNING:警告圖示 QUESTION:詢問表徵圖 ERROR:錯誤表徵圖5.ExtJs之進度條對話方塊 進度條對話方塊也是自訂訊息框的一種，只是在配置Config時添progress=true即可,同時在設定其他相關資訊，比如進度提示。 [javascript] view plaincopy
- 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(Number value,String progressText)方法來定義,參數value是從0-1之間的小數，表示進度百分比;progressText則表示進度條滾動過程中的文本提示資訊。
6.ExtJs之訊息框動畫效果 [javascript] view plaincopy
- var config = {
- title:"飛出的訊息框",
- msg:"這是一個自訂對話方塊，是飛出來的哦",
- width:400,
- multiline:true,
- closable:false,
- buttons:Ext.MessageBox.YESNOCANCEL,
- icon:Ext.MessageBox.QUESTION,
- animEl:"fly"
- };
- 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);
extjs各種彈出框
