基于Extjs的web表单设计器 第二节——表单控件设计
这一节介绍表单设计器的常用控件的设计。
在前面两章节的附图中我已经给出了表单控件的两大分类：区域控件、常用控件。这里对每个分类以及分类所包含的控件的作用进行一一的介绍，因为它们很重要，是表单设计器的基本元素，更是核心组成部门。
一、区域控件，它主要包含三个类型的控件：卡片区域、表格区域、混合区域。这三个控件是我们的其他控件的容器或者叫包装器，相当于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 }
区域分组控件
到这里我们基本定义和归纳了表单的容器控件和常用控件，下一节我介绍表单控件的拖放设计。