基于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来完成布局。
<ext:Panel runat="server" Border="false" Layout="CardLayout" Padding="" ActiveIndex="">
<Items>
<ext:GridPanel ID="GridPanel1" Title="现有表单模板列表" runat="server">
<%--其他信息略..--%>
</ext:GridPanel>
<ext:Panel runat="server" Border="false" Layout="BorderLayout">
<Items>
<ext:TreePanel runat="server" Region="West" RootVisible="false"
Width="" Split="true" Collapsible="true" Collapsed="false">
</ext:TreePanel>
<ext:Panel ID="Panel2" runat="server" Region="Center" ButtonAlign="Center" Border="true"
BodyPadding="" OverflowY="Auto">
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Border="false" Region="East" Width=""
AutoScroll="true" Title="控件属性" Split="true" Collapsible="true" Collapsed="false"
Layout="ColumnLayout">
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
总体布局代码
设计界面左侧的控件区域我们也在本系列的第二节进行了介绍，这里不再重复，有兴趣的朋友可以去参考第二节——表单控件的设计。 这里主要介绍画布区域和右侧的属性区域。
画布区域就是一个能够接受卡片区域、表格区域及混合区域的控件。根据前面第二节的表单控件设计一节的介绍，我们其实很容易的就知道了，画布区域其实就是一个混合区域（mixed）类型的panel。因此上面总体布局代码中的Panel2的代码我们应该修改为：
<ext:Panel ID="mainPanel" runat="server" Region="Center" ButtonAlign="Center" Border="true"
BodyPadding="" OverflowY="Auto">
<CustomConfig>
<ext:ConfigItem Name="type" Value="mixed" Mode="Value" />
</CustomConfig>
<TopBar>
<ext:Toolbar ID="templateRegionToolbar" runat="server">
<Items>
<ext:Button ID="btnEditTemplateJs" runat="server" Text="编辑模板JS方法" Icon="Pencil">
<Listeners>
<Click Handler="EditTemplateJS(tempJsWin)" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<ext:Button runat="server" ID="btnSaveTplInfo" Icon="Disk" Text="保存模板">
<Listeners>
<Click Handler="SaveTemplateInfo()" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator8" runat="server" />
<ext:Button runat="server" ID="btnCancelTplInfo" Icon="Cancel" Text="取消">
<Listeners>
<Click Fn="CancelTplInfo" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
画布区域
介绍完画布区域，就是我们的属性区域设计。属性区域设计的内容项可能比较多一些，主要是我们要针对表单模板、表单区域、不同类型区域的表单项等内容项设置相关的属性（因为我们的卡片区域和表格区域里面即使都是同一种控件类型，可能所拥有的属性值也不一样，这里列举两个例子1.比如表格区域里面的控件可以具有子级列或者父级列；表格区域里面的数字或者金额控件可以具有选择不同的汇总方式，而我们的卡片区域的子控件是不具有这些属性的；2.卡片区域的子控件都具有占用几列的属性而我们的表格区域的子控件对应的却是实际占用列宽度的属性）。为了考虑到职责的单一性，以及后期维护修改的简易性，我们考虑针对这几种不同的内容项的属性分别定义各自的功能属性，即使这些控件属性中有些是重复的属性，我们也会使用单独的控件来标记它们，而不是为了节省一个控件而去复用它们。
因此，根据上面的思路我们的属性区域应该分成4个大的独立的界面。
1.设置表单模板属性的view（主要是设置表单模板的一些信息，比如修改模板名称以及备注信息等）
2.设置区域控件属性的view（主要是设置卡片区域、表格区域、混合区域等区域控件的属性）
3.设置卡片区域子控件属性的view（主要是用来设置卡片区域里面的子控件的属性）
4.设置表格区域子控件属性的view（主要是用来设置表格区域里面的子控件的属性）
这里给出属性区域的示例代码，注意有些事件的方法还在整理中并没有给出来，示例代码仅供参考。
<ext:Panel ID="propertyPanel" runat="server" ActiveIndex="" Border="false" Layout="CardLayout"
ColumnWidth="">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button runat="server" ID="btnAcceptProperty" Text="确 定" Icon="Accept">
<Listeners>
<Click Fn="SetControlProperty" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:FormPanel ID="regionProperty" runat="server" Border="false" Layout="FormLayout"
BodyPadding="">
<CustomConfig>
<ext:ConfigItem Name="type" Value="region" />
</CustomConfig>
<Defaults>
<ext:Parameter Name="labelAlign" Value="left" />
<ext:Parameter Name="labelWidth" Value="" Mode="Raw" />
</Defaults>
<Items>
<ext:Hidden ID="rGroupId" FieldLabel="分组ID" runat="server" />
<ext:Hidden ID="rGroupType" FieldLabel="类型" runat="server" />
<ext:DisplayField ID="rTypeName" FieldLabel="类型名称" runat="server" />
<ext:DisplayField runat="server" ID="rParentGroupName" FieldLabel="所属分组名称" LabelWidth="" />
<ext:TextField ID="rGroupName" FieldLabel="区域名称" runat="server" />
<ext:NumberField ID="rGroupOrder" FieldLabel="排 序" runat="server" MinValue="" AllowDecimals="false" />
<ext:NumberField ID="rGroupCols" FieldLabel="区域列数" runat="server" MinValue="" Text=""
AllowDecimals="false" />
<ext:CheckboxGroup ID="CheckboxGroup1" runat="server">
<Items>
<ext:Checkbox ID="rShowGroupName" BoxLabel="显示标题" runat="server" />
<ext:Checkbox ID="rShowBorder" BoxLabel="显示边框" runat="server" Checked="true" />
</Items>
</ext:CheckboxGroup>
</Items>
</ext:FormPanel>
<ext:FormPanel ID="cardControlProperty" runat="server" Border="false" Layout="FormLayout"
BodyPadding="">
<CustomConfig>
<ext:ConfigItem Name="type" Value="control" />
</CustomConfig>
<Defaults>
<ext:Parameter Name="labelAlign" Value="left" />
<ext:Parameter Name="labelWidth" Value="" Mode="Raw" />
</Defaults>
<Items>
<ext:DisplayField ID="cTypeName" FieldLabel="类型" runat="server" />
<ext:Hidden runat="server" ID="cGroupId" FieldLabel="分组Id" />
<ext:DisplayField runat="server" ID="cGroupName" FieldLabel="所属分组" />
<ext:TextField ID="cDisplayName" FieldLabel="控件名称" runat="server" MaxLength="" />
<ext:NumberField ID="cColSpan" FieldLabel="占用列数" runat="server" MinValue="" Text=""
AllowDecimals="false" />
<ext:TextField ID="cDefaultValue" FieldLabel="默认值" runat="server" Hidden="true" />
<ext:CheckboxGroup ID="CheckboxGroup2" runat="server">
<Items>
<ext:Checkbox runat="server" ID="cIsReadOnly" BoxLabel="只读" />
<ext:Checkbox runat="server" ID="cIsHide" BoxLabel="隐藏" />
</Items>
</ext:CheckboxGroup>
</Items>
</ext:FormPanel>
<ext:FormPanel ID="tableControlProperty" runat="server" Border="false" Layout="FormLayout"
BodyPadding="">
<CustomConfig>
<ext:ConfigItem Name="type" Value="table" />
</CustomConfig>
<Defaults>
<ext:Parameter Name="labelAlign" Value="left" />
<ext:Parameter Name="labelWidth" Value="" Mode="Raw" />
</Defaults>
<Items>
<ext:DisplayField ID="tTypeName" FieldLabel="类型" runat="server" />
<ext:Hidden runat="server" ID="tGroupId" FieldLabel="分组Id" />
<ext:DisplayField ID="tGroupName" runat="server" FieldLabel="所属分组" />
<ext:TextField ID="tDisplayName" FieldLabel="列名称" runat="server" />
<ext:NumberField ID="tWidth" FieldLabel="列宽" runat="server" MinValue="" AllowDecimals="false" />
<ext:RadioGroup ID="tAlign" runat="server" FieldLabel="列对齐">
<Items>
<ext:Radio runat="server" ID="tleft" BoxLabel="居左" TagString="left" Checked="true" />
<ext:Radio runat="server" ID="tcenter" BoxLabel="居中" TagString="center" />
<ext:Radio runat="server" ID="tright" BoxLabel="居右" TagString="right" />
</Items>
</ext:RadioGroup>
<ext:ComboBox ID="tSumType" runat="server" FieldLabel="汇总方式" Editable="false">
<Items>
<ext:ListItem Text="不汇总" Value="none" />
<ext:ListItem Text="合计" Value="sum" />
<ext:ListItem Text="计数" Value="count" />
<ext:ListItem Text="平均值" Value="average" />
<ext:ListItem Text="最大值" Value="max" />
<ext:ListItem Text="最小值" Value="min" />
</Items>
</ext:ComboBox>
<ext:TextField ID="tDefaultValue" FieldLabel="默认值" runat="server" Hidden="true" />
<ext:MultiCombo runat="server" ID="tChildCols" FieldLabel="可选子列" Editable="false"
DisplayField="Name" ValueField="Id" QueryMode="Local">
<Store>
<ext:Store ID="childColStore" runat="server">
<Model>
<ext:Model ID="Model4" runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="childColSelect" />
<Change Fn="MulitiComboChangeFunc" />
<Expand Handler="SetChildColumnSource(tChildCols,currentControlId.getValue())" />
</Listeners>
</ext:MultiCombo>
<ext:CheckboxGroup ID="CheckboxGroup3" runat="server">
<Items>
<ext:Checkbox runat="server" ID="tIsReadOnly" BoxLabel="只读" />
<ext:Checkbox runat="server" ID="tIsHide" BoxLabel="隐藏" />
</Items>
</ext:CheckboxGroup>
</Items>
</ext:FormPanel>
<ext:Panel ID="formProperty" runat="server" Border="false" Layout="FormLayout" BodyPadding="">
<CustomConfig>
<ext:ConfigItem Name="type" Value="formTemplate" />
</CustomConfig>
<Items>
<ext:TextArea runat="server" ID="tbFormTemplateName" LabelAlign="Top" FieldLabel="表单模板名称"
LabelWidth="" />
<ext:TextArea runat="server" ID="tbFormTemplateRemark" LabelAlign="Top" FieldLabel="表单模板备注"
LabelWidth="" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
属性区域示例代码
表单设计器的界面框架设计就介绍到这里。
基于Extjs的web表单设计器 第六节——界面框架设计的更多相关文章
- 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用
基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...
- 基于Extjs的web表单设计器 第五节——数据库设计
这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web ...
- 基于Extjs的web表单设计器 第四节——控件拖放
接着上一节介绍控件拖放的设计. 通过前面的介绍知道,我们的区域类型的容器控件有三种:Card.Table.Mixed. Card 可以支持几乎所有的常用控件,包括:文本TextField.多文本Tex ...
- 基于Extjs的web表单设计器 第二节——表单控件设计
这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基 ...
- 基于Extjs的web表单设计器 第三节——控件拖放
看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性 ...
- 基于Extjs的web表单设计器
由于这样工作和自身的一些原因很长一段时间没有写过博客了.最近想把自己前面一段时间搞出的一个表单设计器的相关经验或者经历记录下来.分享给大家,也算是对自己前2个月的一个总结回顾吧. 首先介绍一下开发此版 ...
- 基于Extjs的web表单设计器 第一节
前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表—— ...
- YbSoftwareFactory 代码生成插件【十六】：Web 下灵活、强大的审批流程实现（含流程控制组件、流程设计器和表单设计器）
程序=数据结构+算法,而企业级的软件=数据+流程,流程往往千差万别,客户自身有时都搞不清楚,随时变化的情况更是家常便饭,抛开功能等不谈,需求变化很大程度上就是流程的变化,流程的变化会给开发工作造成很大 ...
- .net web 开发平台- 表单设计器 一(web版)
如今为了适应需求的不断变化,动态表单设计器应运而生.它主要是为了满足界面的不断变化和提高开发速度.比如:一些页面客户可能也无法确定页面的终于布局,控件的位置,在哪种情况下显示或不显示等可能须要随时改动 ...
随机推荐
- [Effective JavaScript 笔记] 第1章：让自己习惯javascript小结
在这里整理一下,每条对应的提示 第1条:了解使用的js版本 确定应用程序支持的js的版本(浏览器也是应用程序噢) 确保使用的js特性是应用程序支持的(要不写了也运行不了) 总是在严格模式下编写和测试代 ...
- Systemd入门教程：命令篇
导读 传统的Linux系统启动过程主要由著名的init进程(也被称为SysV init启动系统)来处理,而基于init的启动系统被认为有效率不足的问题,systemd是Linux系统机器的另一种启动方 ...
- DICOM：DICOM3.0网络通信协议（续）
转载:http://blog.csdn.net/zssureqh/article/details/44278693 题记: 近一年来一直坚持周末写博客,整理工作和闲暇之余的点点滴滴.对于新知识点.新技 ...
- 细微之处：比较两种CSS清除浮动的兼容
http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...
- XmlWriter/XmlReader示例代码
在Silverlight项目中,如果您想最大程度的减少xap包的大小,仅使用默认System.Xml命名空间下提供的功能来实现“XML序列化/反序列化”,恐怕XmlReader/XmlWriter将成 ...
- sharepoint修改密码
增加SharePoint2010修改域密码功能 前提SharePoint2010的用户基于AD的,因此修改密码是修改了AD的密码,当然也可以修改本机密码(非域的密码).这里我们讨论修改域密码.我们修改 ...
- Django的Context和RequestContext
参考:http://www.dannysite.com/blog/38/ Django的模板渲染中,Context可以用来传递数据,一个Context是一系列变量和值的集合,它和Python的字典有点 ...
- iOS 获得指定文件夹下的指定格式文件
这个容易忘记,然后只能用些自己写的长代码代替了....这里做个备忘 主要用到NSFileManager的 contentsOfDirectoryAtPath:error: 和 NSArray的 pat ...
- Extjs读取本地下拉选框数据源，分为text和value，显示text，传值value
this.rdTypeCom=new Ext.form.ComboBox({ hiddenName:'rdType', store:new Ext. ...
- 项目总结（五）--- 界面调试工具Reveal
在开发中,我们也许会碰到以下需求:对于一些动态复杂的交互界面,手码去制定界面是常有的事情,然而我们在开发中想修改过一些参数后想看下实时效果,只能重新运行项目,进入到对应的页面来进行修改,是不是有点麻烦 ...