跟我一起学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,里面有若干个字段,另一些操作button。
跟我一起学extjs5(22--模块Form的自己定义的设计)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">


        2、由二个FieldSet组成的Form,当中某些能够折叠。
跟我一起学extjs5(22--模块Form的自己定义的设计)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">



        3、在Form中增加子模块的Grid。
跟我一起学extjs5(22--模块Form的自己定义的设计)

        4、在Form中增加Tab的样式。
跟我一起学extjs5(22--模块Form的自己定义的设计)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

        5、某些特殊格式的Form表。
跟我一起学extjs5(22--模块Form的自己定义的设计)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">


        6、一个综合的比較复杂的样例:这个样例中增加单条记录的多个子模块。能够协同进行操作。
跟我一起学extjs5(22--模块Form的自己定义的设计)

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


        上面列出了一些在原来版本号已经能够完毕的Form类型,以上样例都是全然依据配置信息由extjs解释运行而生成的。

能够由管理人员在系统中直接新增和改动不论什么的Form项,由此完毕了模块Form全然自己定义的功能。

        在展示的FormField中,除了能够生成字符Field。也能够完毕日期、数值、Combo等复杂类型的字段。仅仅要想得出来的功能,就能够写成配置,然后解释后展示出来。

在以下的实现过程中,因为没有前后台的交互,我仅仅会做一个比較简单的样例来展示怎样自己定义Form的实现。







上一篇:PDF 补丁丁 0.4.1.839 测试版发布:调整页面留白


下一篇:ARP---地址解析协议