码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-11-26 12:22:20      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

前面几节完成了模块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的实现。

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

标签:

原文地址:http://www.cnblogs.com/niejunchan/p/4997017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!