[Lada-commits] [PATCH 2 of 5] Added custom row expander for 'grid in grid' expandable rows

[Wald Commits]

# HG changeset patch
# User Raimund Renkert <raimund.renkert at intevation.de>
# Date 1463497839 -7200
# Node ID 4a55e665f2d15f82641aa12b4d50b020c9e203ac
# Parent  05948135ce75fb55f3a7c59fe26255144b27e9ee
Added custom row expander for 'grid in grid' expandable rows.

diff -r 05948135ce75 -r 4a55e665f2d1 app/override/RowExpander.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/override/RowExpander.js	Tue May 17 17:10:39 2016 +0200
@@ -0,0 +1,18 @@
+/* Copyright (C) 2013 by Bundesamt fuer Strahlenschutz
+ * Software engineering by Intevation GmbH
+ *
+ * This file is Free Software under the GNU GPL (v>=3)
+ * and comes with ABSOLUTELY NO WARRANTY! Check out
+ * the documentation coming with IMIS-Labordaten-Application for details.
+ */
+
+Ext.define('Lada.override.RowExpander', {
+    override: 'Ext.grid.plugin.RowExpander',
+    beforeReconfigure: function (grid, store, columns, oldStore, oldColumns) {
+        var expander = this.getHeaderConfig();
+        expander.locked = true;
+        if (columns) {
+            columns.unshift(expander);
+        }
+    }
+});
diff -r 05948135ce75 -r 4a55e665f2d1 app/view/plugin/GridRowExpander.js
--- /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();
+    }
+});