Mercurial > lada > lada-client
diff app/view/plugin/GridRowExpander.js @ 1110:4a55e665f2d1
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/app/view/plugin/GridRowExpander.js Tue May 17 17:10:39 2016 +0200 @@ -0,0 +1,147 @@ +Ext.define('Lada.view.plugin.GridRowExpander', { + extend: 'Ext.grid.plugin.RowExpander', + alias: 'plugin.gridrowexpander', + + rowBodyTpl: ' ', + loadingMessage: '<div class="x-grid-rowbody-loading">Loading...</div>', + type: null, + gridConfig: null, + + constructor: function(config) { + var me = this; + var tpl = config.rowBodyTpl || me.rowBodyTpl; + var cmps; + me.type = config.gridType; + me.gridConfig = config.gridConfig; + + me.callParent(arguments); + + cmps = me.cmps = new Ext.util.MixedCollection(null, function(o) { + return o.recordId; + }); + + cmps.on('remove', me.onCmpRemove, me); + + me.rowBodyTpl = new Ext.XTemplate(tpl); + }, + + init: function(grid) { + var me = this; + var view = grid.getView(); + view.processUIEvent = me.createProcessUIEvent(view.processUIEvent); + + me.callParent(arguments); + }, + + destroy: function() { + var cmps = this.cmps; + cmps.removeAll(); + + this.callParent(); + }, + + onCmpRemove: function(cmp) { + cmp.destroy(); + }, + + createProcessUIEvent: function(oldFn) { + var grid = this.getCmp(); + return function(e) { + var me = this; + var item = e.getTarget(me.dataRowSelector || me.itemSelector, + me.getTargetEl()); + var row; + var eGrid; + + row = Ext.fly(item); + + if (row) { + eGrid = row.up('.x-grid'); // grid el of UI event + } + if (eGrid && eGrid.id !== grid.el.id) { + if (e.type !== 'contextmenu' && e.type !== 'keydown') { + e.stopEvent(); + } + + return null; + } + + return oldFn.apply(me, arguments); + }; + }, + + toggleRow: function(rowIdx) { + var me = this; + var rowNode = me.view.getNode(rowIdx); + var row = Ext.get(rowNode); + var nextBd = Ext.get(row).down(this.rowBodyTrSelector); + var expandDiv = nextBd.down('div.x-grid-rowbody'); + var record = me.view.getRecord(rowNode); + + if (row.hasCls(me.rowCollapsedCls)) { + row.removeCls(me.rowCollapsedCls); + nextBd.removeCls(me.rowBodyHiddenCls); + me.recordsExpanded[record.internalId] = true; + + me.showCmp(expandDiv, record); + me.view.fireEvent('expandbody', rowNode, record, nextBd.dom); + } + else { + row.addCls(me.rowCollapsedCls); + nextBd.addCls(me.rowBodyHiddenCls); + me.recordsExpanded[record.internalId] = false; + + me.collapseCmp(expandDiv, record); + me.view.fireEvent('collapsebody', rowNode, record, nextBd.dom); + } + }, + + createCmp: function(record, id, config) { + var me = this; + + var gridConfig = config.gridConfig; + Ext.apply(gridConfig, { + recordId: record.get('id'), + cls: 'row-expander-grid' + }); + var grid = Ext.create(me.type, gridConfig); + + return grid; + }, + + showCmp: function(row, record) { + var me = this; + var cmps = me.cmps; + var id = record.getObservableId(); + var idx = cmps.findIndex('recordId', id); + var cmp = cmps.getAt(idx); + var gridConfig = me.gridConfig; + + if (!cmp) { + row.update(me.loadingMessage); + + cmp = me.cmps.add(me.createCmp(record, id, { + gridConfig: gridConfig + })); + } + row.update(''); + cmp.render(row); + }, + + getInnerCmp: function(record) { + return this.cmps.getByKey( + record.getObservableId() + ); + }, + + collapseCmp: function(row, record) { + var me = this; + var cmps = me.cmps; + var id = record.getObservableId(); + var idx = cmps.findIndex('recordId', id); + var cmp = cmps.getAt(idx); + + cmps.remove(cmp); + cmp.destroy(); + } +});