【21、手把手教你Extjs5（二十一）模块Form的自定义的设计】的更多相关文章

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

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

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

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

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结构,可以自己…

11、手把手教你Extjs5（十一）模块界面的总体设计

上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面.看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了.一个模块的主界面是一个Grid,在其上方有个操作按钮的工具条,在左边有导航区域,在右边有一个记录明细的显示区域.下面即是一个例子: 下面我们来搭建这个界面,首先在view中建立目录module,在此目录下建立Module.js,ModuleController.js, moduleModel.js.这三个文件分别为模块的主界面,模块的控制…

2、手把手教你Extjs5(二)项目中文件的加载过程

上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1､首先:浏览器中输入 localhost:1841 ,调用 index.html; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>app</title> <!-- The line below must be kept i…

20、手把手教你Extjs5（二十）模块Grid的多列表方案

对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容设计了进去,在ModuleModel.js中,在data下面有个属性tf_gridSchemes为数组型,你有多少种方案,都定义在这个下面就可以了,然后再创建一个控件可以根据这些定义来进行方案的选择,选择好以后让grid重新配置新的方案即可. 先来看一下新增一个方案的配置信息,在ModuleMode…

13、手把手教你Extjs5（十三）模块字段和Grid列的定义[1]

这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下ModuleModel.js中加入的新的定义: /** * 模块的数据模型 */ Ext.define('app.view.module.ModuleModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.module', // 在开发过程中…

12、手把手教你Extjs5（十二）执行菜单命令在tabPanel中显示模块

上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.Array.each(menuData, function(group) {…

19、手把手教你Extjs5（十九）模块Grid的其他功能的设想

经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对于“Grid列宽的自动适应”这个功能,我们可以在系统设置项里加入“列宽自适应模式”,下面有三个选项:1.不自动适应:2.首次加载数据时自动适应:3､每次加载数据都自动适应.因为列宽自动适应需要时间,如果字段很多,记录很多会比较慢,因此可以加入这个设置,使用户根据自己的喜好来设置.还可以对每种类型的字…