raimund@1110: Ext.define('Lada.view.plugin.GridRowExpander', {
raimund@1110:     extend: 'Ext.grid.plugin.RowExpander',
raimund@1110:     alias: 'plugin.gridrowexpander',
raimund@1110: 
raimund@1110:     rowBodyTpl: ' ',
raimund@1110:     loadingMessage: '<div class="x-grid-rowbody-loading">Loading...</div>',
raimund@1110:     type: null,
raimund@1110:     gridConfig: null,
raimund@1110: 
raimund@1110:     constructor: function(config) {
raimund@1110:         var me = this;
raimund@1110:         var tpl = config.rowBodyTpl || me.rowBodyTpl;
raimund@1110:         var cmps;
raimund@1110:         me.type = config.gridType;
raimund@1110:         me.gridConfig = config.gridConfig;
raimund@1110: 
raimund@1110:         me.callParent(arguments);
raimund@1110: 
raimund@1110:         cmps = me.cmps = new Ext.util.MixedCollection(null, function(o) {
raimund@1110:             return o.recordId;
raimund@1110:         });
raimund@1110: 
raimund@1110:         cmps.on('remove', me.onCmpRemove, me);
raimund@1110: 
raimund@1110:         me.rowBodyTpl = new Ext.XTemplate(tpl);
raimund@1110:     },
raimund@1110: 
raimund@1110:     init: function(grid) {
raimund@1110:         var me = this;
raimund@1110:         var view = grid.getView();
raimund@1110:         view.processUIEvent = me.createProcessUIEvent(view.processUIEvent);
raimund@1110: 
raimund@1110:         me.callParent(arguments);
raimund@1110:     },
raimund@1110: 
raimund@1110:     destroy: function() {
raimund@1110:         var cmps = this.cmps;
raimund@1110:         cmps.removeAll();
raimund@1110: 
raimund@1110:         this.callParent();
raimund@1110:     },
raimund@1110: 
raimund@1110:     onCmpRemove: function(cmp) {
raimund@1110:         cmp.destroy();
raimund@1110:     },
raimund@1110: 
raimund@1110:     createProcessUIEvent: function(oldFn) {
raimund@1110:         var grid = this.getCmp();
raimund@1110:         return function(e) {
raimund@1110:             var me = this;
raimund@1110:             var item = e.getTarget(me.dataRowSelector || me.itemSelector,
raimund@1110:                 me.getTargetEl());
raimund@1110:             var row;
raimund@1110:             var eGrid;
raimund@1110: 
raimund@1110:             row = Ext.fly(item);
raimund@1110: 
raimund@1110:             if (row) {
raimund@1110:                 eGrid = row.up('.x-grid'); // grid el of UI event
raimund@1110:             }
raimund@1110:             if (eGrid && eGrid.id !== grid.el.id) {
raimund@1110:                 if (e.type !== 'contextmenu' && e.type !== 'keydown') {
raimund@1110:                     e.stopEvent();
raimund@1110:                 }
raimund@1110: 
raimund@1110:                 return null;
raimund@1110:             }
raimund@1110: 
raimund@1110:             return oldFn.apply(me, arguments);
raimund@1110:         };
raimund@1110:     },
raimund@1110: 
raimund@1110:     toggleRow: function(rowIdx) {
raimund@1110:         var me = this;
raimund@1110:         var rowNode = me.view.getNode(rowIdx);
raimund@1110:         var row = Ext.get(rowNode);
raimund@1110:         var nextBd = Ext.get(row).down(this.rowBodyTrSelector);
raimund@1110:         var expandDiv = nextBd.down('div.x-grid-rowbody');
raimund@1110:         var record = me.view.getRecord(rowNode);
raimund@1110: 
raimund@1110:         if (row.hasCls(me.rowCollapsedCls)) {
raimund@1110:             row.removeCls(me.rowCollapsedCls);
raimund@1110:             nextBd.removeCls(me.rowBodyHiddenCls);
raimund@1110:             me.recordsExpanded[record.internalId] = true;
raimund@1110: 
raimund@1110:             me.showCmp(expandDiv, record);
raimund@1110:             me.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
raimund@1110:         }
raimund@1110:         else {
raimund@1110:             row.addCls(me.rowCollapsedCls);
raimund@1110:             nextBd.addCls(me.rowBodyHiddenCls);
raimund@1110:             me.recordsExpanded[record.internalId] = false;
raimund@1110: 
raimund@1110:             me.collapseCmp(expandDiv, record);
raimund@1110:             me.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
raimund@1110:         }
raimund@1110:     },
raimund@1110: 
raimund@1110:     createCmp: function(record, id, config) {
raimund@1110:         var me = this;
raimund@1110: 
raimund@1110:         var gridConfig = config.gridConfig;
raimund@1110:         Ext.apply(gridConfig, {
raimund@1110:             recordId: record.get('id'),
raimund@1110:             cls: 'row-expander-grid'
raimund@1110:         });
raimund@1110:         var grid = Ext.create(me.type, gridConfig);
raimund@1110: 
raimund@1110:         return grid;
raimund@1110:     },
raimund@1110: 
raimund@1110:     showCmp: function(row, record) {
raimund@1110:         var me = this;
raimund@1110:         var cmps = me.cmps;
raimund@1110:         var id = record.getObservableId();
raimund@1110:         var idx = cmps.findIndex('recordId', id);
raimund@1110:         var cmp = cmps.getAt(idx);
raimund@1110:         var gridConfig = me.gridConfig;
raimund@1110: 
raimund@1110:         if (!cmp) {
raimund@1110:             row.update(me.loadingMessage);
raimund@1110: 
raimund@1110:             cmp = me.cmps.add(me.createCmp(record, id, {
raimund@1110:                 gridConfig: gridConfig
raimund@1110:             }));
raimund@1110:         }
raimund@1110:         row.update('');
raimund@1110:         cmp.render(row);
raimund@1110:     },
raimund@1110: 
raimund@1110:     getInnerCmp: function(record) {
raimund@1110:         return this.cmps.getByKey(
raimund@1110:             record.getObservableId()
raimund@1110:         );
raimund@1110:     },
raimund@1110: 
raimund@1110:     collapseCmp: function(row, record) {
raimund@1110:         var me = this;
raimund@1110:         var cmps = me.cmps;
raimund@1110:         var id = record.getObservableId();
raimund@1110:         var idx = cmps.findIndex('recordId', id);
raimund@1110:         var cmp = cmps.getAt(idx);
raimund@1110: 
raimund@1110:         cmps.remove(cmp);
raimund@1110:         cmp.destroy();
raimund@1110:     }
raimund@1110: });