這一節介紹表單設計器的常用控件的設計。
在前面兩章節的附圖中我已經給出了表單控件的兩大分類：區域控件、常用控件。這里對每個分類以及分類所包含的控件的作用進行一一的介紹，因為它們很重要，是表單設計器的基本元素，更是核心組成部門。
一、區域控件，它主要包含三個類型的控件：卡片區域、表格區域、混合區域。這三個控件是我們的其他控件的容器或者叫包裝器，相當於VS里面的各種Panel。它們很重要，每種區域控件的作用都不一樣，能夠包含的控件類型也不大一樣，它們三個區域相互配合使用，可以為我們的表單提供強大的支持，各種復雜的表單都可以設計出來。除了容器作用之外，其實它們還對應着表單在數據庫后台的存儲結構，可能是一張表。
1. 卡片區域控件——它其實就是我們前面說的主表或者卡片表，它里面的控件一般都是多列橫向布局。它可以包含除了所有區域控件之外的其他常用控件。這個區域控件一般所有的表單都會有。
2. 表格區域控件——就是我們前面說的明細表（表格類型的容器），它里面的控件一般都會有多行數據。它也是可以包含除了所有區域控件之外的其他常用控件。該區域控件也是很常用的，一般也會出現在很多表單里面。
3. 混合區域控件——我們不常用，但是非常最重要的一個控件。它的存在使我們設計出非常復雜的表單。該區域只能包含卡片區域、表格區域以及它自身類型的容器控件，其他常用的控件是不能拖放到該區域的。
二、常用控件，該分組的控件是表單的最基本元素，這些控件的組合使用實現了表單所需要的功能。主要包含常用的日期、文本、多文本（可接受換行符，適合顯示較多文本數據）、數字、金額、下拉樹、單選、復選等控件。這里面應用最多和比較復雜的就是下拉樹控件。說它復雜是因為單據的一些復雜的數據源都得靠它來實現（具體怎么實現每個控件的取數我們在后面的章節會詳細介紹）。其他的這些控件對開發人員來說就不必在具體介紹了，通過名稱我們就基本知道它的作用。
通過上面的介紹我們大致知道了組成表單的控件的分類及每種控件的用法。這里介紹一下控件數據源的設計，控件列表分組我們可以直接在頁面代碼里面定義如下的ext 代碼，給予每種控件一個類型的標注（如TreeStore 中的Model中定義的type字段，就是用來標記每種控件的類型）。
1 <ext:TreePanel ID="controlRegion" Title="表單控件" runat="server" Region="West" RootVisible="false" 2 Width="200" Split="true" Collapsible="true" Collapsed="false"> 3 <Store> 4 <ext:TreeStore ID="TreeStore1" runat="server"> 5 <Model> 6 <ext:Model ID="Model1" runat="server"> 7 <Fields> 8 <ext:ModelField Name="type" /> 9 </Fields> 10 </ext:Model> 11 </Model> 12 </ext:TreeStore> 13 </Store> 14 <Root> 15 <ext:Node NodeID="Root" Text="控件" Expanded="true"> 16 <Children> 17 <ext:Node NodeID="type1" Text="區域控件" Expanded="true" AllowDrag="false"> 18 <Children> 19 <ext:Node Leaf="true" Text="卡片區域"> 20 <CustomAttributes> 21 <ext:ConfigItem Name="type" Value="Card" Mode="Value" /> 22 </CustomAttributes> 23 </ext:Node> 24 <ext:Node Leaf="true" Text="表格區域"> 25 <CustomAttributes> 26 <ext:ConfigItem Name="type" Value="Table" Mode="Value" /> 27 </CustomAttributes> 28 </ext:Node> 29 <ext:Node Leaf="true" Text="混合區域"> 30 <CustomAttributes> 31 <ext:ConfigItem Name="type" Value="Mixed" Mode="Value" /> 32 </CustomAttributes> 33 </ext:Node> 34 </Children> 35 </ext:Node> 36 <ext:Node NodeID="type0" Text="常用控件" Expanded="true" AllowDrag="false"> 37 <Children> 38 <ext:Node Leaf="true" Text="文本"> 39 <CustomAttributes> 40 <ext:ConfigItem Name="type" Value="TextField" Mode="Value" /> 41 </CustomAttributes> 42 </ext:Node> 43 <ext:Node Leaf="true" Text="多文本"> 44 <CustomAttributes> 45 <ext:ConfigItem Name="type" Value="TextArea" Mode="Value" /> 46 </CustomAttributes> 47 </ext:Node> 48 <ext:Node Leaf="true" Text="按鈕" Icon="Button"> 49 <CustomAttributes> 50 <ext:ConfigItem Name="type" Value="Button" Mode="Value" /> 51 </CustomAttributes> 52 </ext:Node> 53 <ext:Node Leaf="true" Text="復選框" Icon="CheckError"> 54 <CustomAttributes> 55 <ext:ConfigItem Name="type" Value="CheckBox" Mode="Value" /> 56 </CustomAttributes> 57 </ext:Node> 58 <ext:Node Leaf="true" Text="單選框"> 59 <CustomAttributes> 60 <ext:ConfigItem Name="type" Value="Radio" Mode="Value" /> 61 </CustomAttributes> 62 </ext:Node> 63 <ext:Node Leaf="true" Text="數字"> 64 <CustomAttributes> 65 <ext:ConfigItem Name="type" Value="NumberField" Mode="Value" /> 66 </CustomAttributes> 67 </ext:Node> 68 <ext:Node Leaf="true" Text="金額"> 69 <CustomAttributes> 70 <ext:ConfigItem Name="type" Value="MoneyField" Mode="Value" /> 71 </CustomAttributes> 72 </ext:Node> 73 <ext:Node Leaf="true" Text="日期"> 74 <CustomAttributes> 75 <ext:ConfigItem Name="type" Value="DateField" Mode="Value" /> 76 </CustomAttributes> 77 </ext:Node> 78 <ext:Node Leaf="true" Text="下拉"> 79 <CustomAttributes> 80 <ext:ConfigItem Name="type" Value="ComboBox" Mode="Value" /> 81 </CustomAttributes> 82 </ext:Node> 83 <ext:Node Leaf="true" Text="下拉樹"> 84 <CustomAttributes> 85 <ext:ConfigItem Name="type" Value="NetDropDown" Mode="Value" /> 86 </CustomAttributes> 87 </ext:Node> 88 </Children> 89 </ext:Node> 90 </Children> 91 </ext:Node> 92 </Root> 93 </ext:TreePanel>
但是為了方便擴展，我們通常需要一個描述控件分組和控件本身信息的Xml文件，通過取數接口加載到界面上，這樣后期維護的時候只需要修改該文件就可以了。
在上面的代碼中，我分別為每種控件第一個了類型，比如：卡片區域 type=Card，表格區域 type=Table,文本控件 type=TextField，金額控件 type=MoneyField等等。這里定義的內容會和我們后台代碼定義的控件枚舉類型匹配，為了方便我們把后台定義的控件類型也就定義為和這里一樣的名稱。
1 /// <summary> 2 /// 控件類型 3 /// </summary> 4 public enum ControlType 5 { 6 /// <summary> 7 /// 文本框 8 /// </summary> 9 TextField = 0, 10 /// <summary> 11 /// 多文本框 12 /// </summary> 13 TextArea, 14 /// <summary> 15 /// 隱藏控件 16 /// </summary> 17 HiddenField, 18 /// <summary> 19 /// 數字 20 /// </summary> 21 NumberField, 22 /// <summary> 23 /// 金額 24 /// </summary> 25 MoneyField, 26 /// <summary> 27 /// 文本顯示，不可編輯 28 /// </summary> 29 DisplayField, 30 /// <summary> 31 /// 日期控件 32 /// </summary> 33 DateField, 34 /// <summary> 35 /// 時間控件 36 /// </summary> 37 TimeField, 38 /// <summary> 39 /// 日期+時間控件 40 /// </summary> 41 DateTimeField, 42 /// <summary> 43 /// 下拉字典樹 44 /// </summary> 45 NetDropDown, 46 /// <summary> 47 /// 下拉框 48 /// </summary> 49 ComboBox, 50 /// <summary> 51 /// 復選框 52 /// </summary> 53 CheckBox, 54 /// <summary> 55 /// 單選框 56 /// </summary> 57 Radio, 58 /// <summary> 59 /// 按鈕 60 /// </summary> 61 Button, 62 }
1 /// <summary> 2 /// 表單分組塊的類型 3 /// </summary> 4 public enum GroupType 5 { 6 /// <summary> 7 /// 卡片 （主表） 8 /// </summary> 9 Card = 0, 10 /// <summary> 11 /// 明細表格 12 /// </summary> 13 Table, 14 /// <summary> 15 /// 混合區域 16 /// </summary> 17 Mixed, 18 }
到這里我們基本定義和歸納了表單的容器控件和常用控件，下一節我介紹表單控件的拖放設計。