本章主要簡單介紹下拖放以及快顯視窗的簡單應用。 一、拖放
拖放在EXT的組件體系中佔有很重要的地位，很多組件內部都封裝了對拖放功能的實現，本節主要討論拖放的組件結構和範例，重點是單獨使用Ext.dd包實現拖放功能，而不是與其他的組件相結合。 1.1 使用範圍
(1) 可以拖放表格裡的行，讓他們按照指定的方式排列
(2) 可以拖放樹裡的節點，把節點從一個枝幹拖向另外一個枝幹
(3) 在表格和樹之間也可以進行拖放
(4) 布局的split也是一種拖放
(5) resize也算是拖放，改變大小。 1.2 簡單應用
對於B/S系統而言，拖放一直是一項很少用到的功能，我們一直認為實現拖放功能很複雜，其實在EXT中只要很少的代碼即可實現，如下面代碼所示：
Ext.onReady(function(){ new Ext.dd.DDProxy('block'); });
對應的HTML部分的代碼如下：
<div id="block" style="background:red;" mce_style="background:red;"> </div> 1.3 另外一個執行個體
我們先查看一下詳細的代碼：
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>拖放效果</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <mce:script type="text/javascript" src="../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript"><!-- Ext.onReady(function(){ //new Ext.dd.DDProxy('block'); var proxy=new Ext.dd.DragSource('proxy',{group:'dd'}); proxy.afterDragDrop=function(target,e,id){ var destEl=Ext.get(id); var srcEl=Ext.get(proxy.getEl()); srcEl.insertBefore(destEl); }; var target=new Ext.dd.DDTarget('target','dd'); }); // --></mce:script> </head> <body> <div id="proxy">item</div> <hr /> <div id="target"> <hr /> </div> </body> </html>
(1) 首先是定義拖放的部分，具體代碼為：
var proxy=new Ext.dd.DragSource('proxy',{group:'dd'});
(2) target告訴我們可以把上面的proxy防盜哪些地方，如下面的代碼：
var target=new Ext.dd.DDTarget('target','dd');
(3) 注意：兩者之間有相同的'dd'，這是分組標誌，用來限制拖放的目的地，只有相同的組名的目的地才可以接收它。
(4) 不過，這僅僅只能實現拖放功能，沒有任何效果，下面的代碼可以實現，將proxy拖放到指定的地區，並且停留在該地區，如下面所示：
proxy.afterDragDrop=function(target,e,id){ var destEl=Ext.get(id); var srcEl=Ext.get(proxy.getEl()); srcEl.insertBefore(destEl); }; 二、快顯視窗
從外觀上來講，瀏覽器內建的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所示)
Ext.MessageBox.alert('標題','內容',function(btn){ alert('你剛剛點擊了'+btn); });
圖1 alert效果圖
2、Ext.MessageBox.confirm()的使用方法和效果圖(如圖2所示)
Ext.MessageBox.confirm('選擇框','你到底選擇Yes還是No?',function(btn){ alert('您剛剛選擇了'+btn); });
圖2 confirm效果圖
3、Ext.MessageBox.prompt()的使用方法和效果圖(如圖3所示)
Ext.MessageBox.prompt('輸入框','隨便輸入一些東西',function(btn,text){ alert('你剛剛點擊了'+btn+", 剛剛輸入了"+text); });
圖3 prompt效果圖 2.2 對話方塊的更多配置
1、可以輸入多行的輸入框
首先，我們修改原來的prompt函數，將原來只能接收單行字串資料的文字框修改成可以支援多行文字的形式，相關代碼以及效果圖如下所示。
Ext.MessageBox.show({ title:'多行輸入框', msg:'可以輸入多行:', width:300, buttons:Ext.MessageBox.OKCANCEL, multiline:true, fn:function(btn,text){ alert('你剛剛點擊了 ',btn+",剛剛輸入了 "+text); } });
圖4 多行輸入效果圖
2、自訂對話方塊的按鈕
我們可以使用Ext.Message.show()設定對話方塊中按鈕的樣式，如下面的代碼所示。
Ext.MessageBox.show({ title:'自訂對話方塊的按鈕', msg:'從三個按鈕中選擇一個', buttons:Ext.MessageBox.YESNOCANCEL, fn:function(btn){ alert('您剛剛點擊了 '+btn); } });
圖5 自訂按鈕
3、進度條
進度條經常用於需要使用者等待某一操作完成的情境，當執行一些十分耗時的操作時，我們需要用它來提示使用者耐心等待，Ext.MessageBox為我們提供了預設的進度條，只要將progress參數設定為true，對話方塊中就會出現進度條，如下面的代碼所示：
Ext.MessageBox.show({ title:'請等待', msg:'讀取資料中……', width:240, progress:true, closable:false });
圖6 普通進度條
上面我們雖然已經得到了進度條，但是它的進度狀態不會發生變化，我們需要調用Ext.MessageBox.updateProgree()函數讓進度條狀態發生變化，通常，我們會使用closable:false來隱藏對話方塊右上方的關閉按鈕，從而禁止使用者關掉進度條。
現在，我們為上面添加更新進度條的功能，我們使用timeout定時器對進度條進行修改，進度條的狀態會隨著時間而變化，10秒後整個進度條對話方塊將隱藏。關鍵代碼如下：
Ext.MessageBox.show({ title:'請等待', msg:'讀取資料中……', width:240, progress:true, closable:false }); var f=function(v){ return function(){ if(v==11){ Ext.MessageBox.hide(); }else{ Ext.MessageBox.updateProgress(v/10,'正在讀取第 '+v+' 個，一共10個。'); } }; }; for(var i=1;i<12;i++) { setTimeout(f(i),i*1000); }
圖7 帶有更新功能的進度條
除了這種可以精確控制進度的進度條，我們還可以使用一種自動變化的進度條提示框，這時只要使用Ext.MessageBox.wait()即可，這時彈出的對話方塊中的進度條就會自動向前推進了，不過我們無法對進度條的值進行精確控制。
Ext.MessageBox.show({ title:'請等待', msg:'讀取資料中……', width:240, progress:true, closable:false }); Ext.MessageBox.wait();
4、動畫效果
我們可以為對話方塊設定彈出和關閉的動畫效果，使用animEl參數指定一個HTML元素，對話方塊就會依據制定的HTML元素播放彈出和關閉的動畫。我們修改前面的代碼，加入animEl參數實現動畫效果,如下面的代碼所示：
Ext.MessageBox.show({ title:'自訂對話方塊的按鈕', msg:'從三個按鈕中選擇一個', buttons:Ext.MessageBox.YESNOCANCEL, fn:function(btn){ alert('您剛剛點擊了 '+btn); }, animEl:'dialog' });
animEl參數的值是一個字串，它與HTML中的一個元素的id相對應，例如<div id="dialog"></div>。依據這個元素的id，我們建立的對話方塊才知道根據哪個元素播放彈出和關閉的動畫。
除了Ext.MessageBox的基本應用，實際使用時還需要注意一下幾點：
(1) 為了簡化調用，我們可以把Ext.MessageBox直接寫成Ext.Msg
(2) 我們使用Ext.MessageBox彈出的對話方塊都是基於同一個內部Ext.Window執行個體的，因此我們不能使用Ext.MessageBox彈出多個對話方塊，這樣操作的結果是頁面只會顯示最後一個視窗
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
