基于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版)
如今为了适应需求的不断变化,动态表单设计器应运而生.它主要是为了满足界面的不断变化和提高开发速度.比如:一些页面客户可能也无法确定页面的终于布局,控件的位置,在哪种情况下显示或不显示等可能须要随时改动 ...
随机推荐
- DCMTK开源库的学习笔记4：利用ini配置文件对dcm影像进行归档
转:http://blog.csdn.net/zssureqh/article/details/8846337 背景介绍: 医学影像PACS工作站的服务端需要对大量的dcm文件进行归档,写入数据库处理 ...
- 修改setup.py的源
方法一: 修改文件 ~/.pydistutils.cfg为: [easy_install] index_url = http://pypi.douban.com/simple 方法二: 直接在setu ...
- 【SpringMVC】SpringMVC系列1之HelloWorld
SpringMVC之HelloWorld 概述 SpringMVC 是基于 MVC 设计理念的优秀Web 框架,是目前最主流的 MVC 框架之一.Spring3.0 后全面超越 Struts2,成为最 ...
- Android studio 添加依赖
以前添加依赖总是到github上下载源码,再添加源码到module的依赖当中,其实在studio中,应该使用maven库. 比如在github上看到了sliding-menu这个项目,就应该到mave ...
- sqlite 使用记录
2014年8月13日 18:20:52 SQLite中创建自增字段: 简单的回答:一个声明为 INTEGER PRIMARY KEY 的字段将自动增加. 从 SQLite 的 2.3.4 版本开始,如 ...
- codeforces B. Routine Problem 解题报告
题目链接:http://codeforces.com/problemset/problem/337/B 看到这个题目,觉得特别有意思,因为有熟悉的图片(看过的一部电影).接着让我很意外的是,在纸上比划 ...
- Mybatis各种模糊查询
转载自:http://blog.sina.com.cn/s/blog_667bef380101f2da.html 工作中用到,写三种用法吧,第四种为大小写匹配查询 1. sql中字符串拼接 SELEC ...
- HDU 3835 R(N)
R(N) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- ligureUI 刷新列求和
dataGrid=$("#dataGrid").ligerGrid({ columns: [ {display:, align:'left' }, {display:, align ...
- C#学习笔记-----基于AppDomain的"插件式"开发
很多时候,我们都想使用(开发)USB式(热插拔)的应用,例如,开发一个WinForm应用,并且这个WinForm应用能允许开发人员定制扩展插件,又例如,我们可能维护着一个WinService管理系统, ...