跟我一起学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。

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


        2、由二个FieldSet组成的Form,当中某些能够折叠。

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



        3、在Form中增加子模块的Grid。


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

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

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

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


        6、一个综合的比較复杂的样例:这个样例中增加单条记录的多个子模块。能够协同进行操作。






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

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

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

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







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

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

    跟我一起学extjs5(24--模块Form的自己定义的设计[2])         在本节中将要增加各种类型的字段,在增加字段的时候因为能够一行增加多个字段,因此层次结构又多了一层fieldcont ...

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

    跟我一起学extjs5(25--模块Form的自己定义的设计[3])         自己定义的Form已经能够执行了,以下改一下配置,把Form里面的FieldSet放在Tab之下.改动一下Modu ...

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

    下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formScheme ...

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

    跟我一起学extjs5(11--自己定义模块的设计)        从这一节開始我们来设计并完毕一个自己定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息. 下面信息仅仅是我自己在开发过程中 ...

  5. 跟我一起学extjs5(13--运行菜单命令在tabPanel中显示模块)

    跟我一起学extjs5(13--运行菜单命令在tabPanel中显示模块)         上面设计好了一个模块的主界面,以下通过菜单命令的运行来把这个模块增加到主界面其中. 在MainModule. ...

  6. 跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])

    跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])         写了几个月,总算有点盼头了,最终要从后台取得数据了.后台的spring mvc 和 service 仅仅能简单的 ...

  7. 跟我一起学extjs5(42--单个模块的数据新增方式)

    跟我一起学extjs5(42--单个模块的数据新增方式)         前面的章节中已经增加了一个自己定义的模块,而且能够进行数据的新增.改动.删除的操作了,在这个基础上就能够大作文章了. 这一节来 ...

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

    前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1、可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能 ...

  9. 跟我一起学extjs5(18--模块的新增、改动、删除操作)

    跟我一起学extjs5(18--模块的新增.改动.删除操作)         上节在Grid展示时做了一个金额单位能够手工选择的功能,假设你要增加其它功能.也仅仅要依照这个模式来操作即可了,比方说你想 ...

随机推荐

  1. Asp.Net Mvc MapRoute .html不起作用(转)

    RegisterRoutes 注册路由示例配置: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRo ...

  2. android 广播分类

    安卓广播分为两类:1.普通广播, broadcast,广播发出之后所有满足条件的应用都能获取到广播里面的数据,缺点是应用获取广播中的数据修改之后不能传递给其它接收广播的应用:2.有序广播,orderb ...

  3. SQL2008 存储过程参数相关

      使用inputparame时,使用的是 varchar(20),和数据库中的DEPARTNAME完全匹配,可以查出值: USE [test] GO SET ANSI_NULLS OFF GO SE ...

  4. jquery插件:点击拉出的右侧滑动菜单

    就是一个停留在页面右侧的滑动菜单,点击可以拉出,带回调函数.宽高位置可以参数指定.插件代码如下: (jquery的路径请自己修改) (function($){ $.fn.sideSwitch = fu ...

  5. C# linq的学习及使用

    linq可以对多种数据源和对象进行查询,如数据库.数据集.XML文档.数组等. 通过对linq的使用,可以减少代码量并优化检索操作. LINQ关键字 from 指定数据源和范围变量 where 根据布 ...

  6. JS+CSS+HTML简单计算器

    <!doctype html> <html> <head> <title>计算器</title> <meta charset=&quo ...

  7. oracle 集合运算符

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAY4AAACNCAIAAAAvhQoxAAAbmklEQVR4nO1dX6jc1pn/0lBH4KVV6J ...

  8. oracle中char,vchar,vchar2的区别与联系

    1.char是固定长度的,例如你定义某一列类型为char(20).那么即便你插入"abcde"5个字节,数据库也会在后面自动加上15个字节(可能为空格),以补足二十个字节. 2.v ...

  9. ContentProvider URI的组成

    ContentProvider URI由哪几部分组成 ContentProvider URI与HTTP URI类似,由以下4部分组成: 1.content://   相当于HTTP URI中的http ...

  10. storm之8:并行度

    (一)storm拓扑的并行度可以从以下4个维度进行设置:1.node(服务器):指一个storm集群中的supervisor服务器数量.2.worker(jvm进程):指整个拓扑中worker进程的总 ...