本章主要簡單介紹下拖放以及彈出窗口的簡單應用。

一、拖放

拖放在EXT的組件體系中占有很重要的地位，很多組件內部都封裝了對拖放功能的實現，本節主要討論拖放的組件結構和范例，重點是單獨使用 Ext.dd包實現拖放功能，而不是與其他的組件相結合。

1.1 使用范圍

(1) 可以拖放表格里的行，讓他們按照指定的方式排列

(2) 可以拖放樹里的節點，把節點從一個枝干拖向另外一個枝干

(3) 在表格和樹之間也可以進行拖放

(4) 布局的split也是一種拖放

(5) resize也算是拖放，改變大小。

1.2 簡單應用

對于B/S系統而言，拖放一直是一項很少用到的功能，我們一直認為實現拖放功能很復雜，其實在EXT中只要很少的代碼即可實現，如下面代碼所示：

  1. Ext.onReady(function(){  
  2.             new Ext.dd.DDProxy('block');  
  3.                    });  

 

對應的HTML部分的代碼如下：

  1. <div id="block" style="background:red;" mce_style="background:red;"> </div>  

 

1.3 另外一個實例

我們先查看一下詳細的代碼：

  1. <html xmlns="http://www.w3.org/1999/xhtml" >  
  2. <head id="Head1" runat="server">  
  3.     <title>拖放效果</title>  
  4.     <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  5.     <mce:script type="text/javascript" src="../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  6.     <mce:script type="text/javascript" src="../ext-all.js" mce_src="ext-all.js"></mce:script>  
  7.     <mce:script type="text/javascript"><!--  
  8.         Ext.onReady(function(){  
  9.             //new Ext.dd.DDProxy('block');  
  10.             var proxy=new Ext.dd.DragSource('proxy',{group:'dd'});  
  11.               
  12.             proxy.afterDragDrop=function(target,e,id){  
  13.                 var destEl=Ext.get(id);  
  14.                 var srcEl=Ext.get(proxy.getEl());  
  15.                 srcEl.insertBefore(destEl);  
  16.             };  
  17.               
  18.             var target=new Ext.dd.DDTarget('target','dd');  
  19.         });  
  20.       
  21. // --></mce:script>  
  22. </head>  
  23. <body>  
  24.  <div id="proxy">item</div>  
  25.  <hr />  
  26.  <div id="target">  
  27.  <hr />  
  28.  </div>  
  29. </body>  
  30. </html>  

 

(1)  首先是定義拖放的部分，具體代碼為：

  1. var proxy=new Ext.dd.DragSource('proxy',{group:'dd'});  

 

(2) target告訴我們可以把上面的proxy防盜哪些地方，如下面的代碼：

  1. var target=new Ext.dd.DDTarget('target','dd');  

 

(3) 注意：兩者之間有相同的'dd'，這是分組標志，用來限制拖放的目的地，只有相同的組名的目的地才可以接收它。

(4) 不過，這僅僅只能實現拖放功能，沒有任何效果，下面的代碼可以實現，將proxy拖放到指定的區域，并且停留在該區域，如下面所示：

  1. proxy.afterDragDrop=function(target,e,id){  
  2.                 var destEl=Ext.get(id);  
  3.                 var srcEl=Ext.get(proxy.getEl());  
  4.                 srcEl.insertBefore(destEl);  
  5.             };  

 

 

二、彈出窗口

從外觀上來講，瀏覽器自帶的alert、confirm、prompt等對話框并不好看，而且配置也不靈活。諸如按鈕的添加、刪除、以及修改按下按鈕所觸發的事件等操作都非常難以執行，而在EXT的msgbox里都能實現，而且外觀相當漂亮，本節將詳細介紹EXT中的彈出窗口。

2.1 Ext.MessageBox的使用方法

Ext.MessageBox為我們提供了彈出提示框的簡單方法，使用它提供的alert、confirm、prompt等對話框完全可以代替瀏覽器原生的alert、confirm、prompt鄧對話框，除此之外，Ext.MessageBox還提供了諸如進度條等更多的功能。

1、Ext.MessageBox.alert()的使用方法和效果圖(圖1所示)

  1. Ext.MessageBox.alert('標題','內容',function(btn){  
  2.     alert('你剛剛點擊了'+btn);  
  3. });  

 

1

圖1 alert效果圖

2、Ext.MessageBox.confirm()的使用方法和效果圖(如圖2所示)

  1. Ext.MessageBox.confirm('選擇框','你到底選擇Yes 還是No?',function(btn){  
  2.                 alert('您剛剛選擇了'+btn);  
  3.             });  

 

2

圖2 confirm效果圖

3、Ext.MessageBox.prompt()的使用方法和效果圖(如圖3所示)

  1. Ext.MessageBox.prompt('輸入框','隨便輸入一些東西 ',function(btn,text){  
  2.     alert('你剛剛點擊了'+btn+", 剛剛輸入了"+text);  
  3. });  

 

 3

圖3 prompt效果圖

2.2 對話框的更多配置

1、可以輸入多行的輸入框

首先，我們修改原來的prompt函數，將原來只能接收單行字符串數據的文本框修改成可以支持多行文字的形式，相關代碼以及效果圖如下所示。

  1. Ext.MessageBox.show({  
  2.                 title:'多行輸入框',  
  3.                 msg:'可以輸入多行:',  
  4.                 width:300,  
  5.                 buttons:Ext.MessageBox.OKCANCEL,  
  6.                 multiline:true,  
  7.                 fn:function(btn,text){  
  8.                     alert('你剛剛點擊了 ',btn+",剛剛輸入了 "+text);  
  9.                 }  
  10.             });  

 

4

圖4 多行輸入效果圖

2、自定義對話框的按鈕

我們可以使用Ext.Message.show()設置對話框中按鈕的樣式，如下面的代碼所示。

  1. Ext.MessageBox.show({  
  2.                 title:'自定義對話框的按鈕',  
  3.                 msg:'從三個按鈕中選擇一個',  
  4.                 buttons:Ext.MessageBox.YESNOCANCEL,  
  5.                 fn:function(btn){  
  6.                     alert('您剛剛點擊了 '+btn);  
  7.                 }  
  8.             });  

 

5

圖5 自定義按鈕

3、進度條

進度條經常用于需要用戶等待某一操作完成的場景，當執行一些十分耗時的操作時，我們需要用它來提示用戶耐心等待，Ext.MessageBox為我們提供了默認的進度條，只要將progress參數設置為true，對話框中就會出現進度條，如下面的代碼所示：

  1. Ext.MessageBox.show({  
  2.                 title:'請等待',  
  3.                 msg:'讀取數據中……',  
  4.                 width:240,  
  5.                 progress:true,  
  6.                 closable:false  
  7.             });  

 

6

圖6 普通進度條

上面我們雖然已經得到了進度條，但是它的進度狀態不會發生變化，我們需要調用Ext.MessageBox.updateProgree()函數讓進度條狀態發生變化，通常，我們會使用closable:false來隱藏對話框右上角的關閉按鈕，從而禁止用戶關掉進度條。

現在，我們為上面添加更新進度條的功能，我們使用timeout定時器對進度條進行修改，進度條的狀態會隨著時間而變化，10秒后整個進度條對話框將隱藏。關鍵代碼如下：

  1. Ext.MessageBox.show({  
  2.                 title:'請等待',  
  3.                 msg:'讀取數據中……',  
  4.                 width:240,  
  5.                 progress:true,  
  6.                 closable:false  
  7.             });  
  8.               
  9.             var f=function(v){  
  10.                 return function(){  
  11.                     if(v==11){  
  12.                         Ext.MessageBox.hide();  
  13.                     }else{  
  14.                         Ext.MessageBox.updateProgress(v/10,'正在讀取第 '+v+' 個，一共10個。');  
  15.                     }  
  16.                 };  
  17.             };  
  18.             for(var i=1;i<12;i++)  
  19.             {  
  20.                 setTimeout(f(i),i*1000);  
  21.             }  

 

7

圖7 帶有更新功能的進度條

除了這種可以精確控制進度的進度條，我們還可以使用一種自動變化的進度條提示框，這時只要使用Ext.MessageBox.wait()即可，這時彈出的對話框中的進度條就會自動向前推進了，不過我們無法對進度條的值進行精確控制。

  1. Ext.MessageBox.show({  
  2.                 title:'請等待',  
  3.                 msg:'讀取數據中……',  
  4.                 width:240,  
  5.                 progress:true,  
  6.                 closable:false  
  7.             });  
  8.             Ext.MessageBox.wait();  

 

4、動畫效果

我們可以為對話框設置彈出和關閉的動畫效果，使用animEl參數指定一個HTML元素，對話框就會依據制定的HTML元素播放彈出和關閉的動畫。我們修改前面的代碼，加入animEl參數實現動畫效果,如下面的代碼所示：

  1. Ext.MessageBox.show({  
  2.                title:'自定義對話框的按鈕',  
  3.                msg:'從三個按鈕中選擇一個',  
  4.                buttons:Ext.MessageBox.YESNOCANCEL,  
  5.                fn:function(btn){  
  6.                    alert('您剛剛點擊了 '+btn);  
  7.                },  
  8.                animEl:'dialog'  
  9.            });  

 

animEl參數的值是一個字符串，它與HTML中的一個元素的id相對應，例如<div id="dialog"></div>。依據這個元素的id，我們創建的對話框才知道根據哪個元素播放彈出和關閉的動畫。 

除了Ext.MessageBox的基本應用，實際使用時還需要注意一下幾點：

(1) 為了簡化調用，我們可以把Ext.MessageBox直接寫成Ext.Msg

(2) 我們使用Ext.MessageBox彈出的對話框都是基于同一個內部Ext.Window實例的，因此我們不能使用Ext.MessageBox彈出多個對話框，這樣操作的結果是頁面只會顯示最后一個窗口