基於Extjs的web表單設計器 第三節——控制項拖放

基於Extjs的web表單設計器 第三節——控制項拖放
看過之前設計器的朋友應該有印象，可能會發覺我們的設計器UI設計布局其實類似Visual studio 的設計介面，採用的是左、中、右三個地區布局。左側為控制項地區、中間為表單的畫布設地區、右側為屬性地區。這樣的UI設計肯定就得支援控制項的拖拽設計，使用者只要拖放一個控制項到我們的畫布上，那麼畫布就應該立即能夠看到我們拖放的控制項在畫布中的位置、大小、以及一些控制項內建的預設資訊。不用說這樣的設計對於使用者來說不論在操作體驗上還是設計的感官上都更加直接和方便，因為我在設計階段就可以知道我設計後的表單在系統運行時候的樣子（What i see is what i get）。這個設計相對於我們1.0版本的設計器來說應該是很大的進步，要知道在1.0時代我們的設計器可是一個通過彈出框，然後在彈出框的下拉控制項列表去選擇控制項類型，然後配置其他的xx屬性......然後所有控制項顯示到一個grid列表中的，使用者更不不知道這個表單是什麼樣子，還需要藉助預覽功能才能查看錶單的樣子。 　　我們的設計器既然要採用類似VS設計器的方式，那麼我們也就必須解決一些比較重要的問題。 首先來說就是必須要支援控制項的拖拽設計，也就是當使用者進入我們的設計器介面，選擇了左側的某個控制項後能夠拖放到我們設計器的中間畫布“指定”地區（注意是指定的位置，不是順便一個位置）。然後就是不同地區支援的控制項類型可能不一樣，那麼我們就必須限定每個類型的地區控制項能夠支援哪些控制項。也就是當一個被地區支援的控制項拖放到我們的地區上面並釋放滑鼠後那麼我們的地區就得接受該控制項，如果是不被支援的控制項拖放到我們的地區上面並釋放滑鼠後我們的地區控制項不會有任何響應。同一個地區內部的控制項支援隨意的交換位置，使用者可在一個地區內部通過拖放控制項來改變控制項的位置。我們的地區之間能夠支援控制項的拖放，比如將一個A地區的控制項移動到B地區中區。也就是地區之間可以隨意交換控制項。上面的幾個問題是我們採用拖拽式表單設計器必須解決的問題，如何解決呢？通過研究extjs API 我們可以發現，對於extjs treepanel類型控制項我們在它的view裡面添加一個支援樹節點拖放的treeviewdragdrop外掛程式，實現代碼如下：（請對比Ext.net 的寫法和 純extjs的寫法上的區別.其實它們本質上是一樣的，Ext.Net的代碼在經過伺服器解析之後產生的程式碼其實和純extjs寫的代碼幾乎一樣。只是Ext.Net對.Net開發人員來說使用起來更方便，更熟悉，僅此而已.）   1  <ext:TreePanel ID="controlRegion" Title="表單控制項" runat="server" Region="West" RootVisible="false" 2                 Width="200" Split="true" Collapsible="true" Collapsed="false"> 3                 <Store>  4                   ...........................略 5                 </Store> 6                 <Root>  7                   ...........................略 8                 </Root> 9                 <View>10                     <ext:TreeView ID="TreeView1" runat="server">11                         <Plugins>12                             <ext:TreeViewDragDrop runat="server" EnableDrop="true" DragGroup="tree2div" />13                         </Plugins>14                     </ext:TreeView>15                 </View>16             </ext:TreePanel> Ext.create("Ext.tree.Panel",    {        store: { //.........略 },        id: "TreePanel1",         width: 200,        region: "west",        split: true,        collapsible: true,        title: "表單控制項",        viewConfig: {            id: "TreeView2",            plugins: [                {                    ptype: "treeviewdragdrop",                    dragGroup: "tree2div"                }            ],            xtype: "treeview"        },        root: { //.........略    },        rootVisible: false    })複製代碼 　　請注意代碼中的包含treeviewdragdrop部分的代碼,它的加入表示我們的樹節點可以支援拖放了，但是僅僅這樣還是遠遠不夠的。我們還必須為我們設計器的畫布提供接收拖放功能的代碼，這裡我們給出畫布地區的代碼和對畫布支援拖放的代碼。 我們的設計器代碼中加入一個畫布的panel ，結合前面一章節的介紹大家應該知道我們的畫布其實是一個Mixed類型的混合地區控制項。   1 <ext:Panel ID="mainPanel" runat="server" Region="Center" ButtonAlign="Center" Border="true"2             BodyPadding="10" OverflowY="Auto">3        <CustomConfig>4            <ext:ConfigItem Name="type" Value="Mixed" Mode="Value" />5       </CustomConfig>6  </ext:Panel>  然後我們使用一個Droptarget來為我們的畫布添加可以接收拖動釋放的控制項的功能  <ext:DropTarget ID="ddt" runat="server" Target="mainPanel" Group="tree2div" IgnoreSelf="false">        <NotifyDrop Fn="notifyDrop" />        <NotifyEnter Handler="ftConfig.isDraging=true;" />    </ext:DropTarget>在這裡注意一個地方就是在droptarget裡面的group屬性值為tree2div，這個值和我們前面給treepanel添加的treeviewdragdrop 的DragGroup屬性值是必須一致的，不然是不能正常工作的。到目前為止我們其實僅僅解決了樹的節點可以拖放，以及我們的mainpanel畫布支援接受拖放過來的控制項。但是我們的畫布如何處理拖放過來的控制項，以及每種地區控制項可以接收的控制項等等功能還得我們去設計和定義，具體的設計以及實現留到下一節吧。