ExtJS4.2实例:表格Grid嵌套(内部Grid)-MVC模式

前文ExtJS4.2 Grid嵌套实例中讲解了如何在表格Grid中嵌套Grid,即外部Grid中每行分别展现为不同的内部Grid,比如常见的费用报销业务,费用类别有往返车费和住宿费,其中往返车费需要填写往返类型、交通工具、费用日期、出发地、目的地和金额,住宿费只需填写入住日期、离开日期、单价和金额,在一个表格中包含多种费用类别,每个费用类别下又有多条明细,所需实现的业务场景图片如:

在线演示  /  示例代码

由于前文未采用MVC模式来组织代码,代码可读性不强,本文将在前文基础上按照MVC模式来重新实现该业务场景,以供有需求的朋友参考学习。

外部表格Grid
外部表格Grid主要采用Ext.grid.plugin.RowExpander插件来实现在行记录里展示内部Grid,需设置ptype=‘rowexpander‘,并指定rowBodyTpl,同时pluginId设为‘rowExpander‘(后续需通过pluginId来获取),代码如下:

  1. Ext.define(‘Itdatum.view.UserList‘ ,{
  2. extend: ‘Ext.grid.Panel‘,
  3. alias : ‘widget.userlist‘,
  4. border : false,
  5. columnLines : true,
  6. columns : [ {
  7. align : ‘left‘,
  8. dataIndex : ‘feeitmtyp‘,
  9. exportable : true,
  10. header : ‘费用类别‘,
  11. id : ‘fituitag12‘,
  12. menuDisabled : true,
  13. renderer : renderFeeItemType,
  14. style : ‘text-align:center;‘,
  15. width : 200
  16. }, {
  17. align : ‘left‘,
  18. dataIndex : ‘rbmfndnam‘,
  19. exportable : true,
  20. hidden : true,
  21. id : ‘fituitag13‘,
  22. menuDisabled : true,
  23. style : ‘text-align:center;‘,
  24. width : 80
  25. }, {
  26. align : ‘left‘,
  27. dataIndex : ‘remark‘,
  28. exportable : true,
  29. flex : 1,
  30. header : ‘备注‘,
  31. id : ‘fituitag14‘,
  32. menuDisabled : true,
  33. style : ‘text-align:center;‘,
  34. width : 150
  35. }, {
  36. align : ‘right‘,
  37. dataIndex : ‘rbmtot‘,
  38. exportable : true,
  39. header : ‘金额‘,
  40. id : ‘fituitag15‘,
  41. menuDisabled : true,
  42. style : ‘text-align:center;‘,
  43. summaryType : ‘sum‘,
  44. width : 100
  45. }, {
  46. align : ‘left‘,
  47. dataIndex : ‘rbmbeltyp‘,
  48. exportable : true,
  49. hidden : true,
  50. id : ‘fituitag16‘,
  51. menuDisabled : true,
  52. style : ‘text-align:center;‘,
  53. width : 80
  54. }, {
  55. align : ‘center‘,
  56. exportable : false,
  57. header : ‘操作‘,
  58. id : ‘actioncolumn17‘,
  59. items : [ {
  60. handler : deleteFeeItemType,
  61. iconCls : ‘delete-default‘,
  62. id : ‘button18‘,
  63. tooltip : ‘删除‘,
  64. xtype : ‘button‘
  65. } ],
  66. menuDisabled : true,
  67. style : ‘text-align:center;‘,
  68. width : 80,
  69. xtype : ‘actioncolumn‘
  70. } ],
  71. fbar : [ {
  72. handler : doSubmit,
  73. iconCls : ‘submit-default‘,
  74. id : ‘bt_submit‘,
  75. text : ‘保存‘,
  76. xtype : ‘button‘
  77. }, {
  78. iconCls : ‘reset-default‘,
  79. id : ‘button11‘,
  80. text : ‘重置‘,
  81. xtype : ‘button‘
  82. } ],
  83. features : [ {
  84. ftype : ‘summary‘,
  85. id : ‘summary19‘
  86. } ],
  87. forceFit : false,
  88. id : ‘feeGrid‘,
  89. loadMask : true,
  90. plugins : [ {
  91. pluginId : ‘rowExpander‘,
  92. ptype : ‘rowexpander‘,
  93. rowBodyTpl : [
  94. ‘<div id="{feeitmtyp}">‘,
  95. ‘</div>‘
  96. ]
  97. } ],
  98. selType : ‘rowmodel‘,
  99. sortableColumns : false,
  100. store : ‘FeeGridStore‘,
  101. stripeRows : true,
  102. tbar : [ {
  103. displayField : ‘rbmfndnam‘,
  104. editable : false,
  105. fieldLabel : ‘添加费用类别‘,
  106. hiddenName : ‘feeitmtyp‘,
  107. id : ‘feeitmtyp‘,
  108. labelStyle : ‘text-align:right‘,
  109. listeners : {
  110. ‘select‘ : selectFeeItemType
  111. },
  112. name : ‘feeitmtyp‘,
  113. repeatTriggerClick : true,
  114. store : createStore(),
  115. triggerAction : ‘all‘,
  116. valueField : ‘rbmfndcod‘,
  117. xtype : ‘combo‘
  118. } ],
  119. title : ‘费用报销明细‘,
  120. viewConfig : {
  121. enableTextSelection : true
  122. },
  123. initComponent: function() {
  124. this.callParent(arguments);
  125. }
  126. });


监听Grid.view的expandBody和collapsebody事件

同时监听Grid.store的add事件,即新增一种费用类别时,自动展开该费用类别的内部Grid。

  1. Ext.define(‘Itdatum.controller.UserController‘, {
  2. extend: ‘Ext.app.Controller‘,
  3. views: [
  4. ‘UserList‘,‘UserEdit‘
  5. ],
  6. stores: [
  7. ‘UserStore‘,‘FeeGridStore‘,‘WfcfGridStore‘,‘CcbtGridStore‘,‘SnjtfGridStore‘,‘ZsfGridStore‘
  8. ],
  9. models: [‘UserModel‘,‘FeeGridModel‘,‘WfcfInnerModel‘,‘CcbtInnerModel‘,‘SnjtfInnerModel‘,‘ZsfInnerModel‘],
  10. init: function() {
  11. this.control({
  12. ‘viewport > userlist‘: {
  13. itemdblclick: this.editUser
  14. },
  15. ‘useredit button[action=save]‘: {
  16. click: this.updateUser
  17. },
  18. ‘userlist‘: {
  19. afterrender: function(feeGrid){//侦听userlist渲染
  20. feeGrid.view.on(‘expandBody‘, function (rowNode, record, expandRow, eOpts) {
  21. var rbmbeltyp=record.get(‘rbmbeltyp‘);
  22. if(rbmbeltyp===‘WFCF‘) {
  23. displayWfcfInnerGrid(record);
  24. }else if(rbmbeltyp===‘SNJTF‘) {
  25. displaySnjtfInnerGrid(record);
  26. }else if(rbmbeltyp===‘ZSF‘) {
  27. displayZsfInnerGrid(record);
  28. }else if(rbmbeltyp===‘CCBT‘) {
  29. displayCcbtInnerGrid(record);
  30. }
  31. });
  32. feeGrid.view.on(‘collapsebody‘, function (rowNode, record, expandRow, eOpts) {
  33. var rbmbeltyp=record.get(‘rbmbeltyp‘);
  34. if(rbmbeltyp===‘WFCF‘) {
  35. destroyWfcfInnerGrid(record);
  36. }else if(rbmbeltyp===‘SNJTF‘) {
  37. destroySnjtfInnerGrid(record);
  38. }else if(rbmbeltyp===‘ZSF‘) {
  39. destroyZsfInnerGrid(record);
  40. }else if(rbmbeltyp===‘CCBT‘) {
  41. destroyCcbtInnerGrid(record);
  42. }
  43. });
  44. feeGrid.getStore().on(‘add‘,function( store, records, index, eOpts){
  45. //alert(records.length);
  46. feeGrid.getPlugin(‘rowExpander‘).toggleRow(index,records[0]);
  47. });
  48. }
  49. }
  50. });
  51. },
  52. editUser: function(grid, record) {
  53. alert(‘Edit User‘);
  54. //console.log(‘Double clicked on ‘ + record.get(‘name‘));
  55. var view = Ext.widget(‘useredit‘);
  56. view.down(‘form‘).loadRecord(record);
  57. },
  58. updateUser: function(button) {
  59. alert(‘UpdateUser‘);
  60. //console.log(‘clicked the Save button‘);
  61. },
  62. onPanelRendered: function() {
  63. //console.log(‘The panel was rendered‘);
  64. }
  65. });

其他代码较多,不一一贴出来了,请自行研究在线实例

时间: 08-26

ExtJS4.2实例:表格Grid嵌套(内部Grid)-MVC模式的相关文章

ExtJS4.2实例:含下拉列表(Combobox)的表格(Grid)

本教程是简单进行含有下拉列表(Combobox)的表格(Grid)展示,其中省和市是将代码转换为文字来显示,比如:‘10’代表上海,显示结果如图片: 实例代码:http://www.itdatum.net/webui/extjs/2014/08/7925.html 在线演示:http://www.itdatum.net/online/extjs/examples-itdatum/grid-with-combobox/grid-with-combobox.html ExtJS4.2实例:含下拉列表

ExtJS4.2实例:含可编辑下拉列表(Combobox)的表格(Grid)

本教程是进行含有下拉列表(Combobox)的表格(Grid)进行编辑操作,其中省是可以来编辑的,显示结果如图片: 示例代码:http://www.itdatum.net/webui/extjs/2014/08/7926.html 在线演示:http://www.itdatum.net/online/extjs/examples-itdatum/grid-with-combobox-editable/grid-with-combobox-editable.html ExtJS4.2实例:含可编辑

ExtJS4.2实例:表格(Grid)含联动的下拉列表(Combobox)

本教程是进行含有下拉列表(Combobox)的表格(Grid)进行级联编辑操作,其中省是可以来编辑的,然后市的可选择数据是根据所选择省来过滤后的集合,显示结果如图片: 选择省为“江苏”后,市的可选择范围都是在江苏下辖的城市,如下图: 示例代码:http://www.itdatum.net/webui/extjs/2014/08/7927.html 在线演示:http://www.itdatum.net/online/extjs/examples-itdatum/grid-with-combobo

ExtJS4.2 Grid嵌套实例

ExtJS4.2 Grid嵌套实例,实现工作中常见的费用报销,费用类别:往返车费/出租车费/住宿费/出差补贴.这四种费用类别分别要录入不同的项目,如下图: 示例代码:http://www.itdatum.net/webui/extjs/2014/08/7919.html 在线演示:http://www.itdatum.net/online/extjs/examples-itdatum/nested-grid/nested-grid.html ExtJS4.2 Grid嵌套实例

Essential Grid for ASP.NET MVC表格控件详细介绍及下载

Essential Grid for ASP.NET MVC是一款轻量级的,支持AJAX的,高性能的表格控件,完全支持ASP.NET MVC框架,具有丰富的功能,包含分组.排序.翻页.数据绑定.编辑.过滤.多种内嵌皮肤,可以处理上亿的数据量. 具体功能: 支持对一列或多列数据进行分组 支持单行.列.多行选择 支持通过拖拉操作调整列大小.改变列位置 支持Unbound列 当表格数据有几页时,控件提供了一个页导航条,可用于定位某页或是翻页 支持过滤操作 支持绑定到复杂的数据对象 支持导出数据到Exc

[Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应

本文将演示如何在表格中嵌套另一个表格并使Cell的高度自适应,创建更加强大的布局效果. 在项目文件夹[DemoApp]上点击鼠标右键,弹出右键菜单. [New File]->[Cocoa Touch Class]->[Next]-> [Class]:CustomizeUITableViewCell ,类名. [Subclass of]:UITableViewCell ,父类 [Language]:Swift ->[Next]->[Create]在项目导航区,打开刚刚创建的代码

[CSS] Nest a grid within a grid

A grid item can also be a grid container! Let’s see how to specify a grid within a grid.

Xaml技术:浅谈Grid.ColumnDefinitions和Grid.RowDefinitions属性

Grid.RowDefinitions属性将Grid控件分行,属性值为RowDefinition标签,每一个RowDefinition标签将该Grid对象分为一行: Grid.ColumnDefinitions属性将Grid控件分列,属性值为ColumnDefinition标签,每一个ColumnDefinition标签将该Grid对象分为一列: 在给每个方块添加空间时只需指定该控件的Grid.Column和Grid.Row附加属性值,前提是该控件要定义在Grid空间中,否则将找不到这两个属性,

iOS中表格(UITableView)嵌套表格的简单实现

iOS中表格(UITableView)嵌套表格的简单实现 首先说一下思路:我们在一个控制器里面定义2个tableview,一个作为被嵌套的rootTable,一个作为嵌套的表格tableView1,那我们要实现UITableViewDelegate,UITableViewDataSource,的代理的时候,该怎么区分呢?其实很简单,有两种方法,一个是给定义的2个tableview设置tag值,另一个是直接写出来tableView == rootTable时实现他得代理,否则就实现tableVie