基于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 笔记]第20条：使用call方法自定义接收者来调用方法
不好的实践 函数或方法的接收者(即绑定到特殊关键字this的值)是由调用者的语法决定的.方法调用语法将方法被查找的对象绑定到this变量,(可参阅之前文章<理解函数调用.方法调用及构造函数调用之 ...
- [Effective JavaScript 笔记]第26条：使用bind方法实现函数的柯里化
bind方法的作用,除了有绑定函数到对象外,我们来看看bind方法的一些其它应用. 简单示例 例子:假设有一个装配URL字符串的简单函数.代码如下 function simpleURL(protoco ...
- vim中的查找和替换
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 查找: Gsearch -F 'aa' -R --include=*rb 替换: (1)在查找结果 ...
- Leetcode 之Populating Next Right Pointers in Each Node II（51）
void connect(TreeLinkNode *root) { while (root) { //每一层循环时重新初始化 TreeLinkNode *prev = nullptr; TreeLi ...
- Android自动登录与记住密码
// 获取实例对象 sp = this.getSharedPreferences("userInfo", Context.MODE_WORLD_READABLE); rem_pw ...
- BZOJ 3540 realtime-update 解题
分析一下题意,大约是给定一串牛,然后找到一个跨越距离最长的牛子串使得在这个范围内白牛和花牛一样多. 白牛可以任意涂成花牛. 既然"白牛可以任意涂成花牛",那么我们需要找到一个最长的 ...
- 用Python操纵MySQL
本例用Python操纵MySQL,从指定文件读取数据,并对数据进行处理,处理之后批量插入MySQL. 贴上代码: # -*- coding: gbk -*- import re import MySQ ...
- jquery博客收集的IE6中CSS常见BUG全集及解决方案
今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...
- ios抓包官方文档
OS X Programs OS X supports a wide range of packet trace programs, as described in the following sec ...
- Hessian原理分析
一． 远程通讯协议的基本原理 网络通信需要做的就是将流从一台计算机传输到另外一台计算机,基于传输协议和网络 IO 来实现,其中传输协议比较出名的有 http . tcp . udp 等等, ...