本章主要簡(jiǎn)單介紹下拖放以及彈出窗口的簡(jiǎn)單應(yīng)用。

一、拖放

拖放在EXT的組件體系中占有很重要的地位，很多組件內(nèi)部都封裝了對(duì)拖放功能的實(shí)現(xiàn)，本節(jié)主要討論拖放的組件結(jié)構(gòu)和范例，重點(diǎn)是單獨(dú)使用 Ext.dd包實(shí)現(xiàn)拖放功能，而不是與其他的組件相結(jié)合。

1.1 使用范圍

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

(2) 可以拖放樹(shù)里的節(jié)點(diǎn)，把節(jié)點(diǎn)從一個(gè)枝干拖向另外一個(gè)枝干

(3) 在表格和樹(shù)之間也可以進(jìn)行拖放

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

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

1.2 簡(jiǎn)單應(yīng)用

對(duì)于B/S系統(tǒng)而言，拖放一直是一項(xiàng)很少用到的功能，我們一直認(rèn)為實(shí)現(xiàn)拖放功能很復(fù)雜，其實(shí)在EXT中只要很少的代碼即可實(shí)現(xiàn)，如下面代碼所示：

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

 

對(duì)應(yīng)的HTML部分的代碼如下：

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

 

1.3 另外一個(gè)實(shí)例

我們先查看一下詳細(xì)的代碼：

  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'，這是分組標(biāo)志，用來(lái)限制拖放的目的地，只有相同的組名的目的地才可以接收它。

(4) 不過(guò)，這僅僅只能實(shí)現(xiàn)拖放功能，沒(méi)有任何效果，下面的代碼可以實(shí)現(xiàn)，將proxy拖放到指定的區(qū)域，并且停留在該區(qū)域，如下面所示：

  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.             };  

 

 

二、彈出窗口

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

2.1 Ext.MessageBox的使用方法

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

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

  1. Ext.MessageBox.alert('標(biāo)題','內(nèi)容',function(btn){  
  2.     alert('你剛剛點(diǎn)擊了'+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('你剛剛點(diǎn)擊了'+btn+", 剛剛輸入了"+text);  
  3. });  

 

 3

圖3 prompt效果圖

2.2 對(duì)話框的更多配置

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

首先，我們修改原來(lái)的prompt函數(shù)，將原來(lái)只能接收單行字符串?dāng)?shù)據(jù)的文本框修改成可以支持多行文字的形式，相關(guān)代碼以及效果圖如下所示。

  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('你剛剛點(diǎn)擊了 ',btn+",剛剛輸入了 "+text);  
  9.                 }  
  10.             });  

 

4

圖4 多行輸入效果圖

2、自定義對(duì)話框的按鈕

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

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

 

5

圖5 自定義按鈕

3、進(jìn)度條

進(jìn)度條經(jīng)常用于需要用戶等待某一操作完成的場(chǎng)景，當(dāng)執(zhí)行一些十分耗時(shí)的操作時(shí)，我們需要用它來(lái)提示用戶耐心等待，Ext.MessageBox為我們提供了默認(rèn)的進(jìn)度條，只要將progress參數(shù)設(shè)置為true，對(duì)話框中就會(huì)出現(xiàn)進(jìn)度條，如下面的代碼所示：

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

 

6

圖6 普通進(jìn)度條

上面我們雖然已經(jīng)得到了進(jìn)度條，但是它的進(jìn)度狀態(tài)不會(huì)發(fā)生變化，我們需要調(diào)用Ext.MessageBox.updateProgree()函數(shù)讓進(jìn)度條狀態(tài)發(fā)生變化，通常，我們會(huì)使用closable:false來(lái)隱藏對(duì)話框右上角的關(guān)閉按鈕，從而禁止用戶關(guān)掉進(jìn)度條。

現(xiàn)在，我們?yōu)樯厦嫣砑痈逻M(jìn)度條的功能，我們使用timeout定時(shí)器對(duì)進(jìn)度條進(jìn)行修改，進(jìn)度條的狀態(tài)會(huì)隨著時(shí)間而變化，10秒后整個(gè)進(jìn)度條對(duì)話框?qū)㈦[藏。關(guān)鍵代碼如下：

  1. Ext.MessageBox.show({  
  2.                 title:'請(qǐng)等待',  
  3.                 msg:'讀取數(shù)據(jù)中……',  
  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+' 個(gè)，一共10個(gè)。');  
  15.                     }  
  16.                 };  
  17.             };  
  18.             for(var i=1;i<12;i++)  
  19.             {  
  20.                 setTimeout(f(i),i*1000);  
  21.             }  

 

7

圖7 帶有更新功能的進(jìn)度條

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

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

 

4、動(dòng)畫(huà)效果

我們可以為對(duì)話框設(shè)置彈出和關(guān)閉的動(dòng)畫(huà)效果，使用animEl參數(shù)指定一個(gè)HTML元素，對(duì)話框就會(huì)依據(jù)制定的HTML元素播放彈出和關(guān)閉的動(dòng)畫(huà)。我們修改前面的代碼，加入animEl參數(shù)實(shí)現(xiàn)動(dòng)畫(huà)效果,如下面的代碼所示：

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

 

animEl參數(shù)的值是一個(gè)字符串，它與HTML中的一個(gè)元素的id相對(duì)應(yīng)，例如<div id="dialog"></div>。依據(jù)這個(gè)元素的id，我們創(chuàng)建的對(duì)話框才知道根據(jù)哪個(gè)元素播放彈出和關(guān)閉的動(dòng)畫(huà)。 

除了Ext.MessageBox的基本應(yīng)用，實(shí)際使用時(shí)還需要注意一下幾點(diǎn)：

(1) 為了簡(jiǎn)化調(diào)用，我們可以把Ext.MessageBox直接寫(xiě)成Ext.Msg

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