项目使用ext4，且建立在MVC架构上。
实测发现以下可解，转自：(52条消息) 使用ExtJS5 GridPanel实现表格嵌套SubGrid（基于ExtJS MVC模式）_Banboll的博客-CSDN博客_extjs grid嵌套grid
核心修改点：
- 入口文件配置 SGEntry.js
1 Ext.application({
2 name:'SubGrid',
3 autoCreateViewport: 'SubGrid.view.SubGridMain',
4 //将视图模型加载到项目中
5 controllers:['SubGridController']
6 });
- 视图层外层Grid SubGridMain.js 和嵌套Grid InnerGrid.js 定义
1&2、在plugins中添加插件，和修改table
1 Ext.define('SubGrid.view.SubGridMain', {
2 extend : 'Ext.grid.Panel',
3 title : 'SubGridTest',
4 alias : 'widget.outerGrid',
5 store : 'SubGridStore',
6 forceFit : true,
7 selModel : {
8 selType: 'cellmodel',
9 mode:'SIMPLE',
10 },
11 //该段为主表添加RowExpander插件，并指定展开区域的div标签以及类，用于承载子表
12 plugins : {
13 //指明插件類型
14 ptype : 'rowexpander',
15 //指明行展开区域
16 rowBodyTpl :["<div class='customer_expand_area_cls'>","</div>"],
17 },
18 initComponent : function() {
19 Ext.apply(this, {
20 columns : [ {
21 header : 'Name',
22 dataIndex : 'name',
23 align : 'center'
24 }, {
25 header : 'Email',
26 dataIndex : 'email',
27 align : 'center'
28 }, {
29 header : 'Phone',
30 dataIndex : 'phone',
31 align : 'center'
32 } ]
33 });
34 this.callParent(arguments);
35 },
36 })
1 Ext.define('SubGrid.view.InnerGrid', {
2 extend : 'Ext.grid.Panel',
3 alias : 'widget.innerGrids',
4 store : 'InnerGridStore',
5 forceFit : true,
6 border : false,
7 selModel : {
8 selType: 'cellmodel',
9 mode:'SIMPLE',
10 },
11 initComponent : function() {
12 /*
13 * 表格嵌套时必须重写Ext.view.Table，否则报错因为事件链调用的原因。
14 */
15 Ext.define('SystemFox.overrides.view.Table', {
16 override : 'Ext.view.Table',
17 checkThatContextIsParentGridView : function(e) {
18 var target = Ext.get(e.target);
19 var parentGridView = target.up('.x-grid-view');
20 if (this.el != parentGridView) {
21 return false;
22 } else {
23 return true;
24 }
25 },
26 processItemEvent : function(record, row, rowIndex, e) {
27 if (e.target && !this.checkThatContextIsParentGridView(e)) {
28 return false;
29 } else {
30 return this.callParent([ record, row, rowIndex, e ]);
31 }
32 }
33 });
34
35 Ext.apply(this, {
36 columns : [ {
37 text : 'Name',
38 dataIndex : 'name',
39 sortable : true,
40 align : 'center'
41 }, {
42 text : 'Email',
43 dataIndex : 'email',
44 sortable : true,
45 align : 'center'
46 }, {
47 text : 'Phone',
48 dataIndex : 'phone',
49 sortable : true,
50 align : 'center'
51 },{
52 text : 'Age',
53 dataIndex : 'age',
54 sortable : true,
55 align : 'center'
56 } ,{
57 text : 'Address',
58 dataIndex : 'address',
59 sortable : true,
60 align : 'center'
61 }],
62 });
63 this.callParent(arguments);
64 },
65 })
- 数据源层定义SubGridStore.js 和 InnerGridStore.js
1 Ext.define('SubGrid.store.SubGridStore',{
2 extend:'Ext.data.Store',
3 model:'SubGrid.model.SubGridModel',
4 data : [ {
5 'name' : 'Lisa',
6 "email" : "[email protected]",
7 "phone" : "555-111-1224"
8 }, {
9 'name' : 'Bart',
10 "email" : "[email protected]",
11 "phone" : "555-222-1234"
12 }, {
13 'name' : 'Homer',
14 "email" : "[email protected]",
15 "phone" : "555-222-1244"
16 }, {
17 'name' : 'Marge',
18 "email" : "[email protected]",
19 "phone" : "555-222-1254"
20 } ]
21 })
1 Ext.define('SubGrid.store.InnerGridStore',{
2 extend:'Ext.data.Store',
3 model:'SubGrid.model.InnerGridModel',
4 data : [ {
5 'name' : 'LisaInnerGridData',
6 "email" : "[email protected]",
7 "phone" : "555-111-1224-Inner",
8 "age":26,
9 "address":"Beijing"
10 }, {
11 'name' : 'BartLisaInnerGridData',
12 "email" : "[email protected]",
13 "phone" : "555-222-1234-Inner",
14 "age":26,
15 "address":"Beijing"
16 }, {
17 'name' : 'HomerLisaInnerGridData',
18 "email" : "[email protected]",
19 "phone" : "555-222-1244-Inner",
20 "age":26,
21 "address":"Beijing"
22 }, {
23 'name' : 'MargeLisaInnerGridData',
24 "email" : "[email protected]",
25 "phone" : "555-222-1254-Inner",
26 "age":26,
27 "address":"Beijing"
28 } ]
29 })
- 模型层定义SubGridModel.js 和 InnerGridModel.js
1 Ext.define('SubGrid.model.SubGridModel', {
2 extend : 'Ext.data.Model',
3 fields:['name','email','phone']
4 })
1 Ext.define('SubGrid.model.InnerGridModel', {
2 extend : 'Ext.data.Model',
3 fields:['name','email','phone','age','address']
4 })
- 最后控制层定义SubGridController.js
3、添加事件监听
1 Ext.define('SubGrid.controller.SubGridController', {
2 extend : 'Ext.app.Controller',
3 stores : [ 'SubGridStore', 'InnerGridStore' ],
4 models : [ 'SubGridModel', 'InnerGridModel' ],
5 views : [ 'SubGridMain', 'InnerGrid' ],
6 init : function() {
7 this.control({
8 //监听主表视图对应事件，注意该事件并非grid panel的事件，而是Ext.view.Table对应事件
9 //而RowExpander的事件会发送到grid panel view来监听执行，所以必须获取grid panle的gridview 来实现监听
10 'outerGrid gridview' : {
11 expandbody : this.rowExpandEventAction,
12 collapsebody:this.rowCollapseBodyAction
13 }
14 });
15 },
16 //展开子表
17 rowExpandEventAction : function(rowNode, record, expand_area, eopts) {
18 //创建子表，关于创建组件的方法，有很多，比如new ，或者create(),或者Ext.create(),在开发过程中具体选择哪种方式
19 //依赖于业务需求，自己判断，比如此时我要实现创建一个组件并渲染到指定区域，最简单的便是直接通过Ext.create来实现
20 //我们已定义组件因为我们需要添加额外的配置属性，倘若不需要添加，直接get**View().create()便可
21 Ext.create('SubGrid.view.InnerGrid', {
22 renderTo : expand_area.getElementsByClassName('customer_expand_area_cls')[0]
23 }).show();
24 },
25 //收起子表
26 rowCollapseBodyAction:function(rowNode, record, expand_area, eOpts){
27 //销毁子表时，我们仅需销毁组件渲染到的区域，那么该区域下的内容也会自动销毁
28 var div_expand=expand_area.getElementsByClassName('customer_expand_area_cls')[0];
29 div_expand.removeChild(div_expand.firstChild);
30 }
31 });
标签：GridPanel,name,phone,实现,SubGrid,嵌套,Ext,email,view From： https://www.cnblogs.com/vegechick/p/17057095.html