跟我一起学extjs5(22--模块Form的自定义的设计)

跟我一起学extjs5(22--模块Form的自定义的设计)

前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些。先来设计一下要完成的总体目标。

1?可以有多个Form方案,对应于显示、新增、修改、审核、审批等功能;

2?对于上述各种功能可以选择不同的Form方案,比如说修改可以有几个方案,各个操作员可以选择他们感兴趣的Form方案来进行数据的修改。

3?每个Form方案中可以定义若干个字段分组(FieldSet或FieldContainer)。

4?每个字段分组中可以放置若干个字段。

5?每个Form方案可以定义成Tab或者Accordion显示方式。

6?可以放置下级模块的Grid在Form中,即master-detail方式。

具体的内容可以看我以前的博客:http://blog.csdn.net/jfok/article/details/24472139,下面我贴几个图显示一下自定义生成的form界面,好有个直观的了解。

1、最基本的Form界面,上面只有一个FieldSet,里面有若干个字段,还有一些操作按钮。

2、由二个FieldSet组成的Form,其中某些可以折叠。

3?在Form中加入子模块的Grid。

4、在Form中加入Tab的样式。

5?某些特殊格式的Form表。

6?一个综合的比较复杂的例子:这个例子中加入单条记录的多个子模块,可以协同进行操作。

上面列出了一些在原来版本已经可以完成的Form类型,以上例子都是完全根据配置信息由extjs解释执行而生成的。可以由管理人员在系统中直接新增和修改任何的Form项,由此完成了模块Form完全自定义的功能。

在展示的FormField中,除了可以生成字符Field,也可以完成日期、数值、Combo等复杂类型的字段,只要想得出来的功能,就能够写成配置,然后解释后展示出来。在下面的实现过程中,由于没有前后台的交互,我只会做一个比较简单的例子来展示如何自定义Form的实现。

跟我一起学extjs5(22--模块Form的自定义的设计)

时间: 2024-10-14 01:11:51

跟我一起学extjs5(22--模块Form的自定义的设计)的相关文章

跟我一起学extjs5(23--模块Form的自定义的设计[1])

跟我一起学extjs5(23--模块Form的自定义的设计[1]) 下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formSchemes,在这个属性下面可以定义多个formScheme,下面的例子中只加入了一个,在formScheme上,加了二个fieldSet,然后在fieldSet下面定义了若干个字段. // 模块的form方案,可以定义多个方案 tf_for

跟我一起学extjs5(25--模块Form的自定义的设计[3])

跟我一起学extjs5(25--模块Form的自定义的设计[3]) 自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. 上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面. 从理论上说,如果你的Form配置信息设置得合理,可以得到你想要的任何样式的Form.但在实际应用的时候,我们只要完成大部分

21、手把手教你Extjs5(二十一)模块Form的自定义的设计

前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1?可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能: 2?对于上述各种功能可以选择不同的Form方案,比如说修改可以有几个方案,各个操作员可以选择他们感兴趣的Form方案来进行数据的修改. 3?每个Form方案中可以定义若干个字段分组(FieldSet或FieldContainer). 4?每个字段分组中可以放置若干个字段. 5?每个Form方案可

22、手把手教你Extjs5(二十二)模块Form的自定义的设计[1]

下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formSchemes,在这个属性下面可以定义多个formScheme,下面的例子中只加入了一个,在formScheme上,加了二个fieldSet,然后在fieldSet下面定义了若干个字段. // 模块的form方案,可以定义多个方案 tf_formSchemes: [{ tf_schemeOrder: 10, t

23、手把手教你Extjs5(二十三)模块Form的自定义的设计[2]

在本节中将要加入各种类型的字段,在加入字段的时候由于可以一行加入多个字段,因此层次结构又多了一层fieldcontainer.form里面的主要层次结构如下: form -- fieldSet -- fieldcontainer -- field. 现在加入fieldcontainer的生成器的文件,在factory中加入文件FieldContainerFactory.js /** * 字段容器factory */ Ext.define('app.view.module.factory.Fiel

24、手把手教你Extjs5(二十四)模块Form的自定义的设计[3]

自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. 上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面. 从理论上说,如果你的Form配置信息设置得合理,可以得到你想要的任何样式的Form.但在实际应用的时候,我们只要完成大部分能自动生成就足够了,真正程序中有超级变态复杂的Form结构,可以自己

跟我一起学extjs5(22--模块Form的自己定义的设计)

跟我一起学extjs5(22--模块Form的自己定义的设计) 前面几节完毕了模块Grid的自己定义,模块Form自己定义的过程和Grid的过程类似,可是要更复杂一些.先来设计一下要完毕的整体目标. 1?能够有多个Form方案,相应于显示.新增.改动.审核.审批等功能: 2?对于上述各种功能能够选择不同的Form方案.比方说改动能够有几个方案,各个操作员能够选择他们感兴趣的Form方案来进行数据的改动. 3?每一个Form方案中能够定义若干个字段分组(FieldSet或FieldContaine

跟我一起学extjs5(11--自定义模块的设计)

跟我一起学extjs5(11--自定义模块的设计) 从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下信息: 1.模块的基本信息 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块. 模块分组:模块分到哪个组里,比如说业务模块1.业务模块2.系统设置.系统管理等. 模块标识:系统中唯一的模块的标识,一般这个标识等同于数据库

跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])

跟我一起学extjs5(41--增加一个自定义模块[2销售合同加入菜单和模块展示]) 在前面一节销售合同模块的信息导入系统后,需要在菜单中加入这个模块,但是现在菜单模块没法利用此系统进行编辑(多模块的层次现在还没有加入),因此只能在数据库里加入一条记录了: 加入后,重新启动一下tomcat,进入系统,就能在菜单"合同管理"下,看到 "销售合同"的菜单条了,点击一下,看看结果吧. 以上是自动生成"销售合同"的模块界面,这个就是最初介绍的模块的列表.