这一节介绍表单设计器的常用控件的设计。

  在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件、常用控件。这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基本元素,更是核心组成部门。

  一、区域控件,它主要包含三个类型的控件:卡片区域、表格区域、混合区域。这三个控件是我们的其他控件的容器或者叫包装器,相当于VS里面的各种Panel。它们很重要,每种区域控件的作用都不一样,能够包含的控件类型也不大一样,它们三个区域相互配合使用,可以为我们的表单提供强大的支持,各种复杂的表单都可以设计出来。除了容器作用之外,其实它们还对应着表单在数据库后台的存储结构,可能是一张表。

    1. 卡片区域控件——它其实就是我们前面说的主表或者卡片表,它里面的控件一般都是多列横向布局。它可以包含除了所有区域控件之外的其他常用控件。这个区域控件一般所有的表单都会有。

    2. 表格区域控件——就是我们前面说的明细表(表格类型的容器),它里面的控件一般都会有多行数据。它也是可以包含除了所有区域控件之外的其他常用控件。该区域控件也是很常用的,一般也会出现在很多表单里面。

    3. 混合区域控件——我们不常用,但是非常最重要的一个控件。它的存在使我们设计出非常复杂的表单。该区域只能包含卡片区域、表格区域以及它自身类型的容器控件,其他常用的控件是不能拖放到该区域的。

  二、常用控件,该分组的控件是表单的最基本元素,这些控件的组合使用实现了表单所需要的功能。主要包含常用的日期、文本、多文本(可接受换行符,适合显示较多文本数据)、数字、金额、下拉树、单选、复选等控件。这里面应用最多和比较复杂的就是下拉树控件。说它复杂是因为单据的一些复杂的数据源都得靠它来实现(具体怎么实现每个控件的取数我们在后面的章节会详细介绍)。其他的这些控件对开发人员来说就不必在具体介绍了,通过名称我们就基本知道它的作用。

   通过上面的介绍我们大致知道了组成表单的控件的分类及每种控件的用法。这里介绍一下控件数据源的设计,控件列表分组我们可以直接在页面代码里面定义如下的ext 代码,给予每种控件一个类型的标注(如TreeStore 中的Model中定义的type字段,就是用来标记每种控件的类型)。

 <ext:TreePanel ID="controlRegion" Title="表单控件" runat="server" Region="West" RootVisible="false"
Width="200" Split="true" Collapsible="true" Collapsed="false">
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="type" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="Root" Text="控件" Expanded="true">
<Children>
<ext:Node NodeID="type1" Text="区域控件" Expanded="true" AllowDrag="false">
<Children>
<ext:Node Leaf="true" Text="卡片区域">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="Card" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="表格区域">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="Table" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="混合区域">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="Mixed" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
<ext:Node NodeID="type0" Text="常用控件" Expanded="true" AllowDrag="false">
<Children>
<ext:Node Leaf="true" Text="文本">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="TextField" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="多文本">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="TextArea" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="按钮" Icon="Button">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="Button" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="复选框" Icon="CheckError">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="CheckBox" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="单选框">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="Radio" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="数字">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="NumberField" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="金额">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="MoneyField" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="日期">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="DateField" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="下拉">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="ComboBox" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true" Text="下拉树">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="NetDropDown" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>

但是为了方便扩展,我们通常需要一个描述控件分组和控件本身信息的Xml文件,通过取数接口加载到界面上,这样后期维护的时候只需要修改该文件就可以了。

在上面的代码中,我分别为每种控件第一个了类型,比如:卡片区域 type=Card,表格区域 type=Table,文本控件 type=TextField,金额控件 type=MoneyField等等。这里定义的内容会和我们后台代码定义的控件枚举类型匹配,为了方便我们把后台定义的控件类型也就定义为和这里一样的名称。

  /// <summary>
/// 控件类型
/// </summary>
public enum ControlType
{
/// <summary>
/// 文本框
/// </summary>
TextField = ,
/// <summary>
/// 多文本框
/// </summary>
TextArea,
/// <summary>
/// 隐藏控件
/// </summary>
HiddenField,
/// <summary>
/// 数字
/// </summary>
NumberField,
/// <summary>
/// 金额
/// </summary>
MoneyField,
/// <summary>
/// 文本显示,不可编辑
/// </summary>
DisplayField,
/// <summary>
/// 日期控件
/// </summary>
DateField,
/// <summary>
/// 时间控件
/// </summary>
TimeField,
/// <summary>
/// 日期+时间控件
/// </summary>
DateTimeField,
/// <summary>
/// 下拉字典树
/// </summary>
NetDropDown,
/// <summary>
/// 下拉框
/// </summary>
ComboBox,
/// <summary>
/// 复选框
/// </summary>
CheckBox,
/// <summary>
/// 单选框
/// </summary>
Radio,
/// <summary>
/// 按钮
/// </summary>
Button,
}

控件类型枚举

     /// <summary>
/// 表单分组块的类型
/// </summary>
public enum GroupType
{
/// <summary>
/// 卡片 (主表)
/// </summary>
Card = ,
/// <summary>
/// 明细表格
/// </summary>
Table,
/// <summary>
/// 混合区域
/// </summary>
Mixed,
}

区域分组控件

到这里我们基本定义和归纳了表单的容器控件和常用控件,下一节我介绍表单控件的拖放设计。

    

                         

基于Extjs的web表单设计器 第二节——表单控件设计的更多相关文章

  1. VS编程,编辑WPF过程中,点击设计器中界面某一控件,在XAML中高亮突出显示相应的控件代码的设置方法。

    原文:VS编程,编辑WPF过程中,点击设计器中界面某一控件,在XAML中高亮突出显示相应的控件代码的设置方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net ...

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

    前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表—— ...

  3. 基于JQuery的WEB套打设计器jatoolsPrinter1.0

    开发web套打应用时,如快递单打印,一般要经过以下步骤:1. 扫描快递单据,保存成一个图片文件2. 将底图作成<img>3. 在<img>上放置打印项,试着打印到打印机,观察有 ...

  4. 基于jQuery的web在线流程图设计器GooFlow

    简易的流程图设计控件,效果图: JavaScript源文件在GooFlow.js中,样式文件是GooFlow2.css.可以自定义样式. GooFlow_item类是每个项的样式属性. 但估计实现任务 ...

  5. 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

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

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

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

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

    这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web ...

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

    看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性 ...

  9. 基于Extjs的web表单设计器

    由于这样工作和自身的一些原因很长一段时间没有写过博客了.最近想把自己前面一段时间搞出的一个表单设计器的相关经验或者经历记录下来.分享给大家,也算是对自己前2个月的一个总结回顾吧. 首先介绍一下开发此版 ...

随机推荐

  1. PHP session 跨子域问题总结 ini_set('session.cookie_domain', ".domain.com")

    Session主要分两部分: 一个是Session数据,该数据默认情况下是存放在服务器的tmp文件下的,是以文件形式存在 另一个是标志着Session数据的Session Id,Session ID, ...

  2. CentOS-7设置开机进入命令行界面(不进入图形界面)

    [root@localhost ~]# systemctl get-default graphical.target [root@localhost ~]# systemctl set-default ...

  3. 《Linux内核精髓:精通Linux内核必会的75个绝技》一HACK #10 Fair Group Scheduling

    HACK #10 Fair Group Scheduling 本节介绍Cgroup之一.管理CPU资源的Fair Group Scheduling.Fair Group SchedulingFair ...

  4. JSP Servlet之间交换数据

    摘自:<轻量级Java EE企业应用实战>第三版 对于每次客户端请求而言,web服务器大致需要完成以下步骤: 1.启动单独线程 2.使用I/O流读取用户的请求参数 3.从请求数据中解析参数 ...

  5. JSF + Primefaces: Problem with “rendered” components with ajax

    Cant seem to get rendered to work correctly with update attributes. Here is my codes <ui:define n ...

  6. js 判断空数组,空对象!

    var attr1 = [ ]; var obj1 = { }; console.log(isEmpty(attr1)); console.log(isEmpty(obj1)); function i ...

  7. list.contains

    list.contains(o),系统会对list中的每个元素e调用o.equals(e),方法,加入list中有n个元素,那么会调用n次o.equals(e),只要有一次o.equals(e)返回了 ...

  8. 迷你MVVM框架 avalonjs 1.3.3发布

    大家可以在仓库中看到,多出了一个叫avalon.observe的东西,它是基于Object.observe,dataset, Promise等新API实现.其中,它也使用全新的静态收集依赖的机制,这个 ...

  9. Go Flow Control

    [Go Flow Control] 1.for没有(),必须有{}. 2.for的前后表达式可以为空. 3.没有while,for即是while. 4.无穷循环. 5.if没有(),必须有{}. 6. ...

  10. python's nonlocal

    [python's nonlocal] nonlocal是python3.x中新加的关键字,用于引用本作用域外层作用域的名字 参考:http://blog.csdn.net/chain2012/art ...