ExtJS的使用方法彙總(4)——拖放以及彈出視窗
本章主要簡單介紹下拖放以及彈出視窗的簡單應用。
一、拖放
拖放在EXT的元件體系中佔有很重要的地位，很多元件內部都封裝了對拖放功能的實現，本節主要討論拖放的元件結構和範例，重點是單獨使用Ext.dd包實現拖放功能，而不是與其他的元件相結合。
1.1 使用範圍
(1) 可以拖放表格裡的行，讓他們按照指定的方式排列
(2) 可以拖放樹裡的節點，把節點從一個枝幹拖向另外一個枝幹
(3) 在表格和樹之間也可以進行拖放
(4) 佈局的split也是一種拖放
(5) resize也算是拖放，改變大小。
1.2 簡單應用
對於B/S系統而言，拖放一直是一項很少用到的功能，我們一直認為實現拖放功能很複雜，其實在EXT中只要很少的程式碼即可實現，如下面程式碼所示：
對應的HTML部分的程式碼如下：
1.3 另外一個例項
我們先檢視一下詳細的程式碼：
(1) 首先是定義拖放的部分，具體程式碼為：
(2) target告訴我們可以把上面的proxy防盜哪些地方，如下面的程式碼：
(3) 注意：兩者之間有相同的'dd'，這是分組標誌，用來限制拖放的目的地，只有相同的組名的目的地才可以接收它。
(4) 不過，這僅僅只能實現拖放功能，沒有任何效果，下面的程式碼可以實現，將proxy拖放到指定的區域，並且停留在該區域，如下面所示：
二、彈出視窗
從外觀上來講，瀏覽器自帶的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 alert效果圖
2、Ext.MessageBox.confirm()的使用方法和效果圖(如圖2所示)
圖2 confirm效果圖
3、Ext.MessageBox.prompt()的使用方法和效果圖(如圖3所示)
圖3 prompt效果圖
2.2 對話方塊的更多配置
1、可以輸入多行的輸入框
首先，我們修改原來的prompt函式，將原來只能接收單行字串資料的文字框修改成可以支援多行文字的形式，相關程式碼以及效果圖如下所示。
圖4 多行輸入效果圖
2、自定義對話方塊的按鈕
我們可以使用Ext.Message.show()設定對話方塊中按鈕的樣式，如下面的程式碼所示。
圖5 自定義按鈕
3、進度條
進度條經常用於需要使用者等待某一操作完成的場景，當執行一些十分耗時的操作時，我們需要用它來提示使用者耐心等待，Ext.MessageBox為我們提供了預設的進度條，只要將progress引數設定為true，對話方塊中就會出現進度條，如下面的程式碼所示：
圖6 普通進度條
上面我們雖然已經得到了進度條，但是它的進度狀態不會發生變化，我們需要呼叫Ext.MessageBox.updateProgree()函式讓進度條狀態發生變化，通常，我們會使用closable:false來隱藏對話方塊右上角的關閉按鈕，從而禁止使用者關掉進度條。
現在，我們為上面新增更新進度條的功能，我們使用timeout定時器對進度條進行修改，進度條的狀態會隨著時間而變化，10秒後整個進度條對話方塊將隱藏。關鍵程式碼如下：
圖7 帶有更新功能的進度條
除了這種可以精確控制進度的進度條，我們還可以使用一種自動變化的進度條提示框，這時只要使用Ext.MessageBox.wait()即可，這時彈出的對話方塊中的進度條就會自動向前推進了，不過我們無法對進度條的值進行精確控制。
4、動畫效果
我們可以為對話方塊設定彈出和關閉的動畫效果，使用animEl引數指定一個HTML元素，對話方塊就會依據制定的HTML元素播放彈出和關閉的動畫。我們修改前面的程式碼，加入animEl引數實現動畫效果,如下面的程式碼所示：
animEl引數的值是一個字串，它與HTML中的一個元素的id相對應，例如<div id="dialog"></div>。依據這個元素的id，我們建立的對話方塊才知道根據哪個元素播放彈出和關閉的動畫。
除了Ext.MessageBox的基本應用，實際使用時還需要注意一下幾點：
(1) 為了簡化呼叫，我們可以把Ext.MessageBox直接寫成Ext.Msg
(2) 我們使用Ext.MessageBox彈出的對話方塊都是基於同一個內部Ext.Window例項的，因此我們不能使用Ext.MessageBox彈出多個對話方塊，這樣操作的結果是頁面只會顯示最後一個視窗