plugin.RowWidget.js

Ext.define('MyApp.view.search.results.RowWidget', {
    extend: 'Ext.grid.plugin.RowWidget',
    alias: 'plugin.search.results.rowwidget',

    bindView: function(view) {
        this.callParent(arguments);

        this.viewListeners = view.on({
            scope: this,
            destroyable: true,
            expandbody: this.addWidthListeners,
            collapsebody: this.removeWidthListeners
        });
    },

    // This listeners should fix the width narrowing issue
    addWidthListeners: function () {
        if (!this.adjustWidthListeners) {
            this.adjustWidthListeners = this.grid.on({
                scope: this,
                destroyable: true,
                resize: this.adjustWidth,
                columnschanged: this.adjustWidth
            }, this);
        }
    },

    removeWidthListeners: function () {
        if (this.adjustWidthListeners) {
            this.adjustWidthListeners.destroy();
            this.adjustWidthListeners = null;
        }
    },

    adjustWidth: function () {
        var liveRowContexts = this.grid.liveRowContexts;
        var key;
        var widgets;
        var widgetId = this.getId() + '-' + this.grid.view.getId();
        var width = this.grid.getWidth() - 70;

        Ext.suspendLayouts();

        for (key in liveRowContexts) {
            widgets = liveRowContexts[key].widgets;

            if (widgets && widgets[widgetId]) {
                widgets[widgetId].setWidth(width);
            }
        }

        Ext.resumeLayouts(true);
    },

    fastToggleRow: function(rowIdx, record) {
        var me = this,
            // If we are handling a lockable assembly,
            // handle the normal view first
            view = me.normalView || me.view,
            rowNode = view.getNode(rowIdx),
            normalRow = Ext.fly(rowNode),
            nextBd = normalRow.down(me.rowBodyTrSelector, true),
            wasCollapsed = normalRow.hasCls(me.rowCollapsedCls),
            addOrRemoveCls = wasCollapsed ? 'removeCls' : 'addCls';

        normalRow[addOrRemoveCls](me.rowCollapsedCls);
        Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);

        // We're expanding
        if (wasCollapsed) {
            me.recordsExpanded[record.internalId] = true;
            me.fastAddWidget(view, record);
        } else {
            delete me.recordsExpanded[record.internalId];
            me.getWidget(view, record);
        }
    },

    fastAddWidget: function(view, record) {
        var me = this,
            target,
            widget,
            el;

        // If the record is non data (placeholder), or not expanded, return
        if (record.isNonData || !me.recordsExpanded[record.internalId]) {
            return;
        }

        target = Ext.fly(view.getNode(record)).down(me.rowBodyFeature.innerSelector);
        widget = me.getWidget(view, record);

        // Might be no widget if we are handling a lockable grid
        // and only one side has a widget definition.
        if (widget) {
            Ext.callback(me.onWidgetAttach, me.scope, [me, widget, record], 0, me);

            el = widget.el || widget.element;
            if (el) {
                target.dom.appendChild(el.dom);
                widget.updateLayout();
                widget.reattachToBody();
            } else {
                widget.render(target);
            }
        }

        return widget;
    },

    destroy: function () {
        this.removeWidthListeners();

        if (this.viewListeners) {
            this.viewListeners.destroy();
        }

        this.callParent();
    }
});