Mercurial > lada > lada-client

comparison app/view/plugin/GridRowExpander.js @ 1110:4a55e665f2d1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added custom row expander for 'grid in grid' expandable rows.
author Raimund Renkert <raimund.renkert@intevation.de>
date Tue, 17 May 2016 17:10:39 +0200
parents
children
comparison
equal deleted inserted replaced
1109:05948135ce75 1110:4a55e665f2d1
1 Ext.define('Lada.view.plugin.GridRowExpander', {
2 extend: 'Ext.grid.plugin.RowExpander',
3 alias: 'plugin.gridrowexpander',
4
5 rowBodyTpl: '&nbsp;',
6 loadingMessage: '<div class="x-grid-rowbody-loading">Loading...</div>',
7 type: null,
8 gridConfig: null,
9
10 constructor: function(config) {
11 var me = this;
12 var tpl = config.rowBodyTpl || me.rowBodyTpl;
13 var cmps;
14 me.type = config.gridType;
15 me.gridConfig = config.gridConfig;
16
17 me.callParent(arguments);
18
19 cmps = me.cmps = new Ext.util.MixedCollection(null, function(o) {
20 return o.recordId;
21 });
22
23 cmps.on('remove', me.onCmpRemove, me);
24
25 me.rowBodyTpl = new Ext.XTemplate(tpl);
26 },
27
28 init: function(grid) {
29 var me = this;
30 var view = grid.getView();
31 view.processUIEvent = me.createProcessUIEvent(view.processUIEvent);
32
33 me.callParent(arguments);
34 },
35
36 destroy: function() {
37 var cmps = this.cmps;
38 cmps.removeAll();
39
40 this.callParent();
41 },
42
43 onCmpRemove: function(cmp) {
44 cmp.destroy();
45 },
46
47 createProcessUIEvent: function(oldFn) {
48 var grid = this.getCmp();
49 return function(e) {
50 var me = this;
51 var item = e.getTarget(me.dataRowSelector || me.itemSelector,
52 me.getTargetEl());
53 var row;
54 var eGrid;
55
56 row = Ext.fly(item);
57
58 if (row) {
59 eGrid = row.up('.x-grid'); // grid el of UI event
60 }
61 if (eGrid && eGrid.id !== grid.el.id) {
62 if (e.type !== 'contextmenu' && e.type !== 'keydown') {
63 e.stopEvent();
64 }
65
66 return null;
67 }
68
69 return oldFn.apply(me, arguments);
70 };
71 },
72
73 toggleRow: function(rowIdx) {
74 var me = this;
75 var rowNode = me.view.getNode(rowIdx);
76 var row = Ext.get(rowNode);
77 var nextBd = Ext.get(row).down(this.rowBodyTrSelector);
78 var expandDiv = nextBd.down('div.x-grid-rowbody');
79 var record = me.view.getRecord(rowNode);
80
81 if (row.hasCls(me.rowCollapsedCls)) {
82 row.removeCls(me.rowCollapsedCls);
83 nextBd.removeCls(me.rowBodyHiddenCls);
84 me.recordsExpanded[record.internalId] = true;
85
86 me.showCmp(expandDiv, record);
87 me.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
88 }
89 else {
90 row.addCls(me.rowCollapsedCls);
91 nextBd.addCls(me.rowBodyHiddenCls);
92 me.recordsExpanded[record.internalId] = false;
93
94 me.collapseCmp(expandDiv, record);
95 me.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
96 }
97 },
98
99 createCmp: function(record, id, config) {
100 var me = this;
101
102 var gridConfig = config.gridConfig;
103 Ext.apply(gridConfig, {
104 recordId: record.get('id'),
105 cls: 'row-expander-grid'
106 });
107 var grid = Ext.create(me.type, gridConfig);
108
109 return grid;
110 },
111
112 showCmp: function(row, record) {
113 var me = this;
114 var cmps = me.cmps;
115 var id = record.getObservableId();
116 var idx = cmps.findIndex('recordId', id);
117 var cmp = cmps.getAt(idx);
118 var gridConfig = me.gridConfig;
119
120 if (!cmp) {
121 row.update(me.loadingMessage);
122
123 cmp = me.cmps.add(me.createCmp(record, id, {
124 gridConfig: gridConfig
125 }));
126 }
127 row.update('');
128 cmp.render(row);
129 },
130
131 getInnerCmp: function(record) {
132 return this.cmps.getByKey(
133 record.getObservableId()
134 );
135 },
136
137 collapseCmp: function(row, record) {
138 var me = this;
139 var cmps = me.cmps;
140 var id = record.getObservableId();
141 var idx = cmps.findIndex('recordId', id);
142 var cmp = cmps.getAt(idx);
143
144 cmps.remove(cmp);
145 cmp.destroy();
146 }
147 });
http://lada.wald.intevation.org