基于Extjs的web表单设计器第六节——界面框架设计

基于Extjs的web表单设计器第七节——取数公式设计

基于Extjs的web表单设计器第八节——表单引擎设计

　　这一节我给大家介绍一下表单设计器的界面框架设计（这一节距上一节时间有点长了，还望见谅）。这一节的内容比较简单，主要是结合表单设计器的实际情况介绍一些ext前端界面布局、设计的方式，熟悉ext框架或者常用控件布局的人可以略过。

　　我们使用的前端框架是Ext，因此表单设计器的前端界面设计都是基于Ext展开。设计器的总体设计方案为：

　　1.打开设计器后第一层级展现的是目前已有的模板列表信息的一个grid，grid中包含了当前登录所具有操作表单模板的权限。如（新增模板，编辑模板，发布模板，删除模板，停用模板等功能.）

　　2.选择“新增模板”后，在填出的界面填入必要的模板信息然后“确定”后就会进入设计时界面；此时的设计时界面将会为我们产生一个全新的表单模板画布区域，等待你的设计；

　　3.选中现有的某个模板点击“编辑模板”后，同样会进入设计时界面；此时的设计时界面将会为我们加载并生产该模板已有的表单区域及表单项信息；

　　4.其他操作都不会进入我们的设计时界面；

　　5.设计时界面采用类似Visual Studio 的设计器界面，主要分为左、中、右三个区域。左侧为控件区域、中间为表单的画布设区域、右侧为属性区域（具体可以参考本系列的开篇的图样）。

　　基于上面的设计方案，在Ext我们可以采用这样的界面布局方式，第一级panel使用cardlayout，包含一个已有模板列表的grid和另外一个设计时的panel，设计时panel采用左中右的布局方式我们一般使用borderLayout来完成布局。

 1 <ext:Panel runat="server" Border="false" Layout="CardLayout" Padding="5" ActiveIndex="0">
 2         <Items>
 3             <ext:GridPanel ID="GridPanel1" Title="现有表单模板列表" runat="server">
 4                 <%--其他信息略..--%>
 5             </ext:GridPanel>
 6             <ext:Panel runat="server" Border="false" Layout="BorderLayout">
 7                 <Items>
 8                     <ext:TreePanel runat="server" Region="West" RootVisible="false"
 9                         Width="200" Split="true" Collapsible="true" Collapsed="false">
10                     </ext:TreePanel>
11                     <ext:Panel ID="Panel2" runat="server" Region="Center" ButtonAlign="Center" Border="true"
12                         BodyPadding="10" OverflowY="Auto">
13                     </ext:Panel>
14                     <ext:Panel ID="Panel3" runat="server" Border="false" Region="East" Width="260"
15                         AutoScroll="true" Title="控件属性" Split="true" Collapsible="true" Collapsed="false"
16                         Layout="ColumnLayout">
17                     </ext:Panel>
18                 </Items>
19             </ext:Panel>
20         </Items>
21     </ext:Panel>

总体布局代码

　　设计界面左侧的控件区域我们也在本系列的第二节进行了介绍，这里不再重复，有兴趣的朋友可以去参考第二节——表单控件的设计。这里主要介绍画布区域和右侧的属性区域。

　　画布区域就是一个能够接受卡片区域、表格区域及混合区域的控件。根据前面第二节的表单控件设计一节的介绍，我们其实很容易的就知道了，画布区域其实就是一个混合区域（mixed）类型的panel。因此上面总体布局代码中的Panel2的代码我们应该修改为：

 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                         <TopBar>
 7                             <ext:Toolbar ID="templateRegionToolbar" runat="server">
 8                                 <Items>
 9                                     <ext:Button ID="btnEditTemplateJs" runat="server" Text="编辑模板JS方法" Icon="Pencil">
10                                         <Listeners>
11                                             <Click Handler="EditTemplateJS(tempJsWin)" />
12                                         </Listeners>
13                                     </ext:Button>
14                                     <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
15                                     <ext:Button runat="server" ID="btnSaveTplInfo" Icon="Disk" Text="保存模板">
16                                         <Listeners>
17                                             <Click Handler="SaveTemplateInfo()" />
18                                         </Listeners>
19                                     </ext:Button>
20                                     <ext:ToolbarSeparator ID="ToolbarSeparator8" runat="server" /> 
21                                     <ext:Button runat="server" ID="btnCancelTplInfo" Icon="Cancel" Text="取消">
22                                         <Listeners>
23                                             <Click Fn="CancelTplInfo" />
24                                         </Listeners>
25                                     </ext:Button>
26                                 </Items>
27                             </ext:Toolbar>
28                         </TopBar>
29                     </ext:Panel>

画布区域

　　介绍完画布区域，就是我们的属性区域设计。属性区域设计的内容项可能比较多一些，主要是我们要针对表单模板、表单区域、不同类型区域的表单项等内容项设置相关的属性（因为我们的卡片区域和表格区域里面即使都是同一种控件类型，可能所拥有的属性值也不一样，这里列举两个例子1.比如表格区域里面的控件可以具有子级列或者父级列；表格区域里面的数字或者金额控件可以具有选择不同的汇总方式，而我们的卡片区域的子控件是不具有这些属性的；2.卡片区域的子控件都具有占用几列的属性而我们的表格区域的子控件对应的却是实际占用列宽度的属性）。为了考虑到职责的单一性，以及后期维护修改的简易性，我们考虑针对这几种不同的内容项的属性分别定义各自的功能属性，即使这些控件属性中有些是重复的属性，我们也会使用单独的控件来标记它们，而不是为了节省一个控件而去复用它们。

　　因此，根据上面的思路我们的属性区域应该分成4个大的独立的界面。

　　1.设置表单模板属性的view（主要是设置表单模板的一些信息，比如修改模板名称以及备注信息等）

　　2.设置区域控件属性的view（主要是设置卡片区域、表格区域、混合区域等区域控件的属性）

　　3.设置卡片区域子控件属性的view（主要是用来设置卡片区域里面的子控件的属性）

　　4.设置表格区域子控件属性的view（主要是用来设置表格区域里面的子控件的属性）

　　这里给出属性区域的示例代码，注意有些事件的方法还在整理中并没有给出来，示例代码仅供参考。

  1  <ext:Panel ID="propertyPanel" runat="server" ActiveIndex="0" Border="false" Layout="CardLayout"
  2                                         ColumnWidth="1">
  3                                         <TopBar>
  4                                             <ext:Toolbar ID="Toolbar2" runat="server">
  5                                                 <Items>
  6                                                     <ext:Button runat="server" ID="btnAcceptProperty" Text="确 定" Icon="Accept">
  7                                                         <Listeners>
  8                                                             <Click Fn="SetControlProperty" />
  9                                                         </Listeners>
 10                                                     </ext:Button>
 11                                                 </Items>
 12                                             </ext:Toolbar>
 13                                         </TopBar>
 14                                         <Items>
 15                                             <ext:FormPanel ID="regionProperty" runat="server" Border="false" Layout="FormLayout"
 16                                                 BodyPadding="5">
 17                                                 <CustomConfig>
 18                                                     <ext:ConfigItem Name="type" Value="region" />
 19                                                 </CustomConfig>
 20                                                 <Defaults>
 21                                                     <ext:Parameter Name="labelAlign" Value="left" />
 22                                                     <ext:Parameter Name="labelWidth" Value="60" Mode="Raw" />
 23                                                 </Defaults>
 24                                                 <Items>
 25                                                     <ext:Hidden ID="rGroupId" FieldLabel="分组ID" runat="server" />
 26                                                     <ext:Hidden ID="rGroupType" FieldLabel="类型" runat="server" />
 27                                                     <ext:DisplayField ID="rTypeName" FieldLabel="类型名称" runat="server" />
 28                                                     <ext:DisplayField runat="server" ID="rParentGroupName" FieldLabel="所属分组名称" LabelWidth="80" />
 29                                                     <ext:TextField ID="rGroupName" FieldLabel="区域名称" runat="server" />
 30                                                     <ext:NumberField ID="rGroupOrder" FieldLabel="排 序" runat="server" MinValue="1" AllowDecimals="false" />
 31                                                     <ext:NumberField ID="rGroupCols" FieldLabel="区域列数" runat="server" MinValue="1" Text="1"
 32                                                         AllowDecimals="false" />
 33                                                     <ext:CheckboxGroup ID="CheckboxGroup1" runat="server">
 34                                                         <Items>
 35                                                             <ext:Checkbox ID="rShowGroupName" BoxLabel="显示标题" runat="server" />
 36                                                             <ext:Checkbox ID="rShowBorder" BoxLabel="显示边框" runat="server" Checked="true" />
 37                                                         </Items>
 38                                                     </ext:CheckboxGroup>
 39                                                 </Items>
 40                                             </ext:FormPanel>
 41                                             <ext:FormPanel ID="cardControlProperty" runat="server" Border="false" Layout="FormLayout"
 42                                                 BodyPadding="5">
 43                                                 <CustomConfig>
 44                                                     <ext:ConfigItem Name="type" Value="control" />
 45                                                 </CustomConfig>
 46                                                 <Defaults>
 47                                                     <ext:Parameter Name="labelAlign" Value="left" />
 48                                                     <ext:Parameter Name="labelWidth" Value="60" Mode="Raw" />
 49                                                 </Defaults>
 50                                                 <Items>
 51                                                     <ext:DisplayField ID="cTypeName" FieldLabel="类型" runat="server" />
 52                                                     <ext:Hidden runat="server" ID="cGroupId" FieldLabel="分组Id" />
 53                                                     <ext:DisplayField runat="server" ID="cGroupName" FieldLabel="所属分组" />
 54                                                     <ext:TextField ID="cDisplayName" FieldLabel="控件名称" runat="server" MaxLength="8" />
 55                                                     <ext:NumberField ID="cColSpan" FieldLabel="占用列数" runat="server" MinValue="1" Text="1"
 56                                                         AllowDecimals="false" />
 57                                                     <ext:TextField ID="cDefaultValue" FieldLabel="默认值" runat="server" Hidden="true" />
 58                                                     <ext:CheckboxGroup ID="CheckboxGroup2" runat="server">
 59                                                         <Items>
 60                                                             <ext:Checkbox runat="server" ID="cIsReadOnly" BoxLabel="只读" />
 61                                                             <ext:Checkbox runat="server" ID="cIsHide" BoxLabel="隐藏" />
 62                                                         </Items>
 63                                                     </ext:CheckboxGroup>
 64                                                 </Items>
 65                                             </ext:FormPanel>
 66                                             <ext:FormPanel ID="tableControlProperty" runat="server" Border="false" Layout="FormLayout"
 67                                                 BodyPadding="5">
 68                                                 <CustomConfig>
 69                                                     <ext:ConfigItem Name="type" Value="table" />
 70                                                 </CustomConfig>
 71                                                 <Defaults>
 72                                                     <ext:Parameter Name="labelAlign" Value="left" />
 73                                                     <ext:Parameter Name="labelWidth" Value="60" Mode="Raw" />
 74                                                 </Defaults>
 75                                                 <Items>
 76                                                     <ext:DisplayField ID="tTypeName" FieldLabel="类型" runat="server" />
 77                                                     <ext:Hidden runat="server" ID="tGroupId" FieldLabel="分组Id" />
 78                                                     <ext:DisplayField ID="tGroupName" runat="server" FieldLabel="所属分组" />
 79                                                     <ext:TextField ID="tDisplayName" FieldLabel="列名称" runat="server" />
 80                                                     <ext:NumberField ID="tWidth" FieldLabel="列宽" runat="server" MinValue="100" AllowDecimals="false" />
 81                                                     <ext:RadioGroup ID="tAlign" runat="server" FieldLabel="列对齐">
 82                                                         <Items>
 83                                                             <ext:Radio runat="server" ID="tleft" BoxLabel="居左" TagString="left" Checked="true" />
 84                                                             <ext:Radio runat="server" ID="tcenter" BoxLabel="居中" TagString="center" />
 85                                                             <ext:Radio runat="server" ID="tright" BoxLabel="居右" TagString="right" />
 86                                                         </Items>
 87                                                     </ext:RadioGroup>
 88                                                     <ext:ComboBox ID="tSumType" runat="server" FieldLabel="汇总方式" Editable="false">
 89                                                         <Items>
 90                                                             <ext:ListItem Text="不汇总" Value="none" />
 91                                                             <ext:ListItem Text="合计" Value="sum" />
 92                                                             <ext:ListItem Text="计数" Value="count" />
 93                                                             <ext:ListItem Text="平均值" Value="average" />
 94                                                             <ext:ListItem Text="最大值" Value="max" />
 95                                                             <ext:ListItem Text="最小值" Value="min" />
 96                                                         </Items>
 97                                                     </ext:ComboBox>
 98                                                     <ext:TextField ID="tDefaultValue" FieldLabel="默认值" runat="server" Hidden="true" />
 99                                                     <ext:MultiCombo runat="server" ID="tChildCols" FieldLabel="可选子列" Editable="false"
100                                                         DisplayField="Name" ValueField="Id" QueryMode="Local">
101                                                         <Store>
102                                                             <ext:Store ID="childColStore" runat="server">
103                                                                 <Model>
104                                                                     <ext:Model ID="Model4" runat="server">
105                                                                         <Fields>
106                                                                             <ext:ModelField Name="Id" />
107                                                                             <ext:ModelField Name="Name" />
108                                                                         </Fields>
109                                                                     </ext:Model>
110                                                                 </Model>
111                                                             </ext:Store>
112                                                         </Store>
113                                                         <Listeners>
114                                                             <Select Fn="childColSelect" />
115                                                             <Change Fn="MulitiComboChangeFunc" />
116                                                             <Expand Handler="SetChildColumnSource(tChildCols,currentControlId.getValue())" />
117                                                         </Listeners>
118                                                     </ext:MultiCombo>
119                                                     <ext:CheckboxGroup ID="CheckboxGroup3" runat="server">
120                                                         <Items>
121                                                             <ext:Checkbox runat="server" ID="tIsReadOnly" BoxLabel="只读" />
122                                                             <ext:Checkbox runat="server" ID="tIsHide" BoxLabel="隐藏" />
123                                                         </Items>
124                                                     </ext:CheckboxGroup>
125                                                 </Items>
126                                             </ext:FormPanel>
127                                             <ext:Panel ID="formProperty" runat="server" Border="false" Layout="FormLayout" BodyPadding="5">
128                                                 <CustomConfig>
129                                                     <ext:ConfigItem Name="type" Value="formTemplate" />
130                                                 </CustomConfig>
131                                                 <Items>
132                                                     <ext:TextArea runat="server" ID="tbFormTemplateName" LabelAlign="Top" FieldLabel="表单模板名称"
133                                                         LabelWidth="60" />
134                                                     <ext:TextArea runat="server" ID="tbFormTemplateRemark" LabelAlign="Top" FieldLabel="表单模板备注"
135                                                         LabelWidth="60" />
136                                                 </Items>
137                                             </ext:Panel>
138                                         </Items>
139                                     </ext:Panel>

属性区域示例代码

表单设计器的界面框架设计就介绍到这里。

相关阅读:
关于浏览器cookie的详解
 浏览器渲染帧
 Vue3中关于diff的优化
 JS报错 Cannot set property 'display' of undefined问题
 vue选项卡，循环数据点击改变class，并初始循环中的第一个为选中状态class
Nuxt中引入elementUI
jq 获取节点改变元素class的显示、隐藏
 vue监听滚动条
 Nuxt中引入iconfont图标
 vue导航点击切换 2.0
原文地址：https://www.cnblogs.com/rpoplar/p/4338180.html

基于Extjs的web表单设计器 第六节——界面框架设计

基于Extjs的web表单设计器第六节——界面框架设计