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

先来看一下新增一个方案的配置信息,在ModuleModel.js中,修改tf_gridSchemes为以下内容:

  1. // 模块的grid方案,可以定义多个方案
  2. tf_gridSchemes: [{
  3. tf_schemeOrder: 10,
  4. tf_schemeName: 'Grid方案1', // 第一个grid方案
  5. // 表头分组
  6. tf_schemeGroups: [{
  7. tf_gridGroupId: 1, // id号
  8. tf_gridGroupOrder: 10, // 表头分组序号
  9. tf_gridGroupName: '工程项目基本信息',
  10. tf_isShowHeaderSpans: true, // 是否显示分组
  11. tf_isLocked: true, // 是否锁定此分组
  12. // 每一个表头分组下面的字段
  13. tf_groupFields: [{
  14. tf_gridFieldOrder: 5,
  15. tf_fieldId: 10100010
  16. // 工程id号
  17. }, {
  18. tf_gridFieldOrder: 10,
  19. tf_fieldId: 10100020, // 工程项目名称字段
  20. tf_columnWidth: 200
  21. }, {
  22. tf_gridFieldOrder: 20,
  23. tf_fieldId: 10100030, // 工程项目编码字段
  24. tf_columnWidth: 120
  25. }]
  26. }, {
  27. tf_gridGroupOrder: 20, // 表头分组序号
  28. tf_gridGroupName: '工程项目附加信息',
  29. tf_isShowHeaderSpans: false, // 是否显示headerspan
  30. tf_isLocked: false, // 是否锁定此分组
  31. tf_groupFields: [{
  32. tf_gridFieldOrder: 10,
  33. tf_fieldId: 10100040
  34. }, {
  35. tf_gridFieldOrder: 20,
  36. tf_fieldId: 10100050
  37. }, {
  38. tf_gridFieldOrder: 30,
  39. tf_fieldId: 10100060
  40. }, {
  41. tf_gridFieldOrder: 40,
  42. tf_fieldId: 10100070
  43. }, {
  44. tf_gridFieldOrder: 50,
  45. tf_fieldId: 10100080
  46. }, {
  47. tf_gridFieldOrder: 60,
  48. tf_fieldId: 10100090, // 是否通过验收
  49. tf_columnWidth: 80
  50. }, {
  51. tf_gridFieldOrder: 70,
  52. tf_fieldId: 10100100,
  53. tf_columnWidth: -1, // -1表示这我可以撑足最大宽度
  54. tf_autoSizeDisabled: true // 不许自动适应宽度
  55. // 工程方量
  56. }]
  57. }]
  58.  
  59. }, {
  60. tf_schemeOrder: 20,
  61. tf_schemeName: 'Grid方案2', // 第二个grid方案
  62. tf_schemeGroups: [{
  63. tf_gridGroupId: 1, // id号
  64. tf_gridGroupOrder: 10, // 表头分组序号
  65. tf_gridGroupName: '工程项目主要信息',
  66. tf_isShowHeaderSpans: false, // 是否显示分组
  67. tf_isLocked: false, // 是否锁定此分组
  68. tf_groupFields: [{
  69. tf_gridFieldOrder: 5,
  70. tf_fieldId: 10100010,
  71. tf_isLocked: true
  72. }, {
  73. tf_gridFieldOrder: 10,
  74. tf_fieldId: 10100020, // 工程项目名称字段
  75. tf_columnWidth: 200,
  76. tf_isLocked: true
  77. }, {
  78. tf_gridFieldOrder: 20,
  79. tf_fieldId: 10100030, // 工程项目编码字段
  80. tf_columnWidth: 120,
  81. tf_isLocked: true
  82.  
  83. }, {
  84. tf_gridFieldOrder: 10,
  85. tf_fieldId: 10100040
  86. }, {
  87. tf_gridFieldOrder: 20,
  88. tf_fieldId: 10100050
  89. }]
  90. }]
  91. }, {
  92. tf_schemeOrder: 30,
  93. tf_schemeName: 'Grid方案3', // 第三个grid方案
  94. // 表头分组
  95. tf_schemeGroups: [{
  96. tf_gridGroupId: 1, // id号
  97. tf_gridGroupOrder: 10, // 表头分组序号
  98. tf_gridGroupName: '工程项目基本信息',
  99. tf_isShowHeaderSpans: true, // 是否显示分组
  100. tf_isLocked: true, // 是否锁定此分组
  101. tf_groupFields: [{
  102. tf_gridFieldOrder: 10,
  103. tf_fieldId: 10100020, // 工程项目名称字段
  104. tf_columnWidth: 200
  105. }, {
  106. tf_gridFieldOrder: 20,
  107. tf_fieldId: 10100030, // 工程项目编码字段
  108. tf_columnWidth: 120
  109. }]
  110. }, {
  111. tf_gridGroupOrder: 20, // 表头分组序号
  112. tf_gridGroupName: '工程项目附加信息',
  113. tf_isShowHeaderSpans: true, // 是否显示headerspan
  114. tf_isLocked: false, // 是否锁定此分组
  115. tf_groupFields: [{
  116. tf_gridFieldOrder: 10,
  117. tf_fieldId: 10100040
  118. }, {
  119. tf_gridFieldOrder: 20,
  120. tf_fieldId: 10100050
  121. }, {
  122. tf_gridFieldOrder: 30,
  123. tf_fieldId: 10100060
  124. }, {
  125. tf_gridFieldOrder: 40,
  126. tf_fieldId: 10100070
  127. }, {
  128. tf_gridFieldOrder: 50,
  129. tf_fieldId: 10100080
  130. }]
  131. }]
  132.  
  133. }]

在上面定义了三个gridScheme的方案,名称分别为“grid方案1”,“grid方案2”,“grid方案3”,每个方案下面又对字段分组,有些分组设置成了可以显示的二层表头,有些不显示多层表头,还设置了前面几列可以列锁定。数据有了,然后从Combo字段继承新建一个控件,用来可以选择这三个方案。在app/view/module下建立一个文件夹widget,将模块中用到的控件都放在这个下面。在widget目录中建立文件GridSchemeCombo.js。

  1. /**
  2. * 如果一个模块有多个Grid方案,那么在 pading上增加一个可以选择切换方案的Combo
  3. */
  4.  
  5. Ext.define('app.view.module.widget.GridSchemeCombo', {
  6. extend: 'Ext.form.field.ComboBox',
  7. alias: 'widget.gridschemecombo',
  8. fieldLabel: '方案',
  9. editable: false,
  10. labelWidth: 40,
  11. labelAlign: 'right',
  12. width: 200,
  13. queryMode: 'local',
  14. displayField: 'tf_schemeName', // data 中列表主案的名称
  15. valueField: 'tf_schemeOrder', // data 中列表主案的序号
  16. hidden: true, // 默认不显示,如果GridScheme的个数大于1则显示。
  17. bind: {
  18. hidden: '{gridSchemeHidden}', // 这是data中的一个计算字段,根据gridscheme个数来判断此控件是否显示
  19. value: '{gridSchemeId}' // 绑定gridSchemeId的值,在grid中,也绑定此值,这里改变以后,会去执行grid中的绑定事件
  20. },
  21. initComponent: function () {
  22. // 取得最顶层容器的viewModel,如果有更好的办法取得,请告知,谢谢
  23. var viewModel = this.up('modulepanel').getViewModel();
  24. this.store = Ext.create('Ext.data.Store', {
  25. fields: ['tf_schemeOrder', 'tf_schemeName'],
  26. data: viewModel.get('tf_gridSchemes')
  27. });
  28. this.value = viewModel.get('tf_gridSchemes')[0].tf_schemeOrder; // 默认的方案为第一个
  29. this.callParent(arguments);
  30. }
  31. });

下面要在Grid的导航区域中加入此控件。先在uses中引入上面的控件,再修改bind,这样设置了bind 后,上面控件在选择了另一个方案以后,会来执行grid中的 setGridSchemeId这个函数,这个其实就是MVVM的本质。

  1. bind : {
  2. title : '{tf_title} {selectedNames}', // 数据绑定到ModuleModel中的tf_title和选中记录的名称
  3. gridSchemeId : '{gridSchemeId}' // 属性gridSchemeId
  4. // 设置绑定,和GridSchemeCombo是value绑定是一样的
  5. },

下面加入改变了方案以后的执行函敉:

  1. setGridSchemeId : function(value) {
  2. if (this.gridSchemeId != value) {
  3. this.gridSchemeId = value;
  4. Ext.suspendLayouts();
  5. this.columns = app.view.module.factory.ColumnsFactory.getColumns(this
  6. .up('modulepanel').getViewModel(), value);
  7. this.reconfigure(this.store, this.columns);
  8. Ext.resumeLayouts(true);
  9. this.columnAutoSize();
  10. }
  11. },

在pagingtoolbar中加入此控件:

  1. // 创建grid列
  2. // 默认第一个grid方案
  3. this.gridSchemeId = viewModel.get('tf_gridSchemes')[0].tf_schemeOrder;
  4. // 将第一个方案的columns生成,第一个方案是要先设置好,并不是gridschemecombo触发来生成的
  5. this.columns = app.view.module.factory.ColumnsFactory.getColumns(viewModel);
  6.  
  7. this.dockedItems = [{
  8. xtype: 'gridtoolbar', // 按钮toolbar
  9. dock: 'top',
  10. grid: this
  11. }, {
  12. xtype: 'pagingtoolbar', // grid数据分页
  13. store: this.store,
  14. displayInfo: true,
  15. prependButtons: true,
  16. dock: 'bottom',
  17. items: [{ // 在最前面加入grid方案的选择Combo
  18. xtype: 'gridschemecombo'
  19. }]
  20. }];

ColumnsFactory.js的前面一部分也修改过了:

  1. /**
  2. * 用于生成Grid的Columns的类
  3. */
  4.  
  5. Ext.define('app.view.module.factory.ColumnsFactory', {
  6.  
  7. statics : {
  8. getColumns : function(moduleModel, schemeOrderId) {
  9. var scheme = moduleModel.get('tf_gridSchemes')[0]; // 取得第一个grid的方案
  10. if (schemeOrderId) { // 查找到相应的scheme
  11. Ext.Array.each(moduleModel.get('tf_gridSchemes'), function(s) {
  12. if (s.tf_schemeOrder == schemeOrderId) {
  13. scheme = s;
  14. return false;
  15. }
  16. })
  17. }
  18. var columns = [];

为了加这个功能,改了许多处代码,又遇到了很多的bug,大家在切换方案的时候就会看到bug了。经过以上的操作,在模块打开的时候,可以看到在pagingtoolbar上多了一个控件,可以选择来改变grid的column方案了。这个改变方案的步骤也是应用MVVM的特性,上面的代码中没有看到事件的执行代码,因为事件在bind后是自动去执行的。

下面贴一下加入此功能后的截图。

选择了第二个方案后

选择了第三个方案后

对于一个管理系统来说,你的grid有以上几节所写的功能,系统的档次立马提高不少。但是在你没有理解的情况下不要盲目加入,要对系统的设计到功能的内部操作过程都了解了再加入相应功能。这套自定义的系统中完全没有重复的界面类,每一个类都是为了完成新的功能而建立的,到现在这节为止是手工建立了20多个类来协同工作,内部流程已经非常复杂了。等这个系统完全做好,前台会有200多个自定义类,后台也有几百个控制类,没有一定的编程功底和设计能力的话就很难掌控。再加上功能越深入,extjs的bug就会出现的越多,这真是一个头疼的问题。

Grid的操作暂时告一段落,从下面会开始加入自定义Form、自定义图表的开发过程。

20、手把手教你Extjs5(二十)模块Grid的多列表方案的更多相关文章

  1. 12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块

    上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和 ...

  2. 18、手把手教你Extjs5(十八)模块记录的拖放删除、拖放复制新增

    网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一 ...

  3. 19、手把手教你Extjs5(十九)模块Grid的其他功能的设想

    经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对 ...

  4. 14、手把手教你Extjs5(十四)模块字段和Grid列的定义[2]

    model和columns生成好了,下面要修改一下Module.js和Grid.js中的代码,使其能够协同工作. /** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */ ...

  5. 10、手把手教你Extjs5(十)自定义模块的设计

    从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...

  6. 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染

    Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...

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

    上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; ...

  8. 16、手把手教你Extjs5(十六)Grid金额字段单位MVVM方式的选择

    这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位 ...

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

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

随机推荐

  1. HDU 2018 undefined

    题目思路:完全背包,dp[i][j]代表,砍j只怪,用i点疲劳最多能获得的经验值. 和平常的完全背包不一样的是多了一个限制条件:最多只砍S只怪,所以我们应该多一重循环来q:for 1->S,代表 ...

  2. UVA 571 Jugs ADD18 小白书10 数学Part1 专题

    只能往一个方向倒,如c1=3,c2=5,a b从0 0->0 5->3 2->0 2->2 0->2 5->3 4->0 4->3 1->0 1- ...

  3. 用PHP与XML进行网站编程

    一.小序 HTML简单易学又通用,一般的PHP程序就是嵌入在HTML语言之中实现的.但是随着WEB越来越广泛的应用,HTML的弱点也越来越明显了.XML的出现,弥补了这些不足,它提供了一个能够处理互联 ...

  4. oracle-查询执行速度慢的sql

    Oracle 查询每天执行慢的SQL 2014-12-11 18:00:04 分类: Oracle 链接:http://blog.itpub.net/28602568/viewspace-136484 ...

  5. java包(package)

    为了更好地组织类,java提供了包机制,用于区别类名的命名空间. 这样在不同的命名空间就可以有相同命名的类. 1 把功能相似或相关的类或接口阻止在同一个包中,方便类的查找和使用. 2 如同文件夹一样, ...

  6. Vim编辑器的使用和基本配置

    三种模式 1 命令模式 插入 a i o A I O 定位 gg G :n nG ngg $ 0 删除 x nx dd ndd dG 复制和剪切 yy-p dd-p 替换 r R 撤销和恢复 u Ct ...

  7. C# 初步学习

    这学期有了C#开发这门课....先做了计算器,还有进制转换,别人看来似乎很强,其实在ACM中算是两个简单的水题了.....参加竞赛一年下来,发现学到的算法和数据结构都是十分有用的东西. 计算器最核心的 ...

  8. Windows API 之 FineFirstFile、FindNextFile

    参考:https://msdn.microsoft.com/en-us/library/aa364418%28VS.85%29.aspx FindFirstFile Searches a direct ...

  9. GIT问题,error:src refspec master does not match any

    将本地GIT版本库PUSH到一个GITHUB上一个空的版本库时可能会出现如下错误error:src refspec master does not match any原因: 本地版本库为空, 空目录不 ...

  10. 转 SQL 基础--> NEW_VALUE 的使用

    --=============================== -- SQL 基础--> NEW_VALUE 的使用 --=============================== 通常 ...