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: '&nbsp;',
+    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();
+    }
+});

http://lada.wald.intevation.org