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

基于Extjs的web表单设计器

基于Extjs的web表单设计器 第一节

基于Extjs的web表单设计器 第二节——表单控件设计 

基于Extjs的web表单设计器 第三节——控件拖放 

基于Extjs的web表单设计器 第四节——控件拖放 

基于Extjs的web表单设计器 第五节——数据库设计

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

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

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

 1  "mainPanel" runat="server" Region="Center" ButtonAlign="Center" Border="true"
 2                         BodyPadding="10" OverflowY="Auto">
 3                         
 4                             "type" Value="mixed" Mode="Value" />
 5                         
 6                         
 7                             "templateRegionToolbar" runat="server">
 8                                 
 9                                     "btnEditTemplateJs" runat="server" Text="编辑模板JS方法" Icon="Pencil">
10                                         
11                                             "EditTemplateJS(tempJsWin)" />
12                                         
13                                     
14                                     "ToolbarSeparator1" runat="server" />
15                                     "server" ID="btnSaveTplInfo" Icon="Disk" Text="保存模板">
16                                         
17                                             "SaveTemplateInfo()" />
18                                         
19                                     
20                                     "ToolbarSeparator8" runat="server" /> 
21                                     "server" ID="btnCancelTplInfo" Icon="Cancel" Text="取消">
22                                         
23                                             "CancelTplInfo" />
24                                         
25                                     
26                                 
27                             
28                         
29                     

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

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

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

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

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

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

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

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

属性区域示例代码
 
表单设计器的界面框架设计就介绍到这里。
 
　　
						  
					  
						
							


						

							
							
			随笔ASP.NetExtJS表单设计器表单设计器							
						



						
						
						


						

						
					
					

					
					

						
相关
						
				
						
			

																
								

										
一、Asp.Net Core WebAPI——修改默认监听端口
									
									

								 

        
								
							
							

																
								

										
初试form表单提交信息
									
									

								 

        
								
							
							

																
								

										
jQuery 留言表单验证
									
									

								 

        
								
							
							

																
								

										
ASP.NET中WebService的两种身份验证方法
									
									

								 

        
								
							
							

																
								

										
extjs ajax 同步 及 confirm 确认提示框问题
									
									

								 

        
								
							
							

																
								

										
Asp.Net Mvc + ComBoost.Mvc快速开发
									
									

								 

        
								
							
							

																
								

										
HTML表单
									
									

								 

        
								
							
							

																
								

										
ASP.Net11.13
									
									

								 

        
								
							
							

																
								

										
如何在ASP.NET Core应用中实现与第三方IoC/DI框架的整合？
									
									

								 

        
								
							
							

																
								

										
[ASP.NET Core 3框架揭秘] 跨平台开发体验: Linux
									
									

								 

        
								
							
							

																
								

										
ASP.NET Core中如影随形的”依赖注入”[下]: 历数依赖注入的N种玩法
									
									

								 

        
								
							
							

																
								

										
如何远程关闭一个ASP.NET Core应用？
									
									

								 

        
								
							
							
            
            
            
                                    
           
  			
						

					
					
				

				

														
					
					

					
									

					
									   
标签