Rambox-CE/ext/src/dashboard/Panel.js

/**
 * This class is used to wrap content items in the `Dashboard`. It uses an
 * `anchor` layout by default and provides resizing on the bottom edge only.
 * @protected
 */
Ext.define('Ext.dashboard.Panel', {
    extend: 'Ext.panel.Panel',

    xtype: 'dashboard-panel',

    cls: Ext.baseCSSPrefix + 'dashboard-panel',

    anchor: '100%',

    layout  : 'fit',

    frame: true,
    closable: true,
    collapsible: true,
    animCollapse: true,
    titleCollapse  : true,

    stateful : true,

    draggable: {
        moveOnDrag: false
    },

    animateClose: true,

    loadMask: true,
    loadMessage: 'Loading...',

    minHeight: 90,

    resizable: true,
    resizeHandles: 's',

    // Override Panel's default doClose to provide a custom fade out effect
    // when a portlet is removed from the portal
    doClose: function() {
        var me = this;

        if (me.animateClose) {
            if (!me.closing) {
                me.closing = true;
                me.el.animate({
                    opacity: 0,
                    callback: me.finishClose,
                    scope: me
                });
            }
        } else {
            me.finishClose();
        }
    },

    finishClose: function () {
        var me = this,
            closeAction = me.closeAction;

        me.closing = false;
        me.fireEvent('close', me);

        // The close of the last portlet within a column results in removal of both the column and its splitter.
        // So coalesce any layouts resulting from this operation.
        Ext.suspendLayouts();
        me[closeAction]();
        Ext.resumeLayouts(true);

        if (closeAction === 'hide') {
            // Restore the opacity from doClose
            me.el.setOpacity(1);
        }
    },

    afterRender: function () {
        this.callParent();

        if (this.loading) {
            this.onViewBeforeLoad();
        }
    },

    getLoadMask: function () {
        var me = this,
            loadMask = me.rendered && me.loadMask,
            config;

        if (loadMask && !loadMask.isComponent) {
            config = {
                target: me
            };

            if (loadMask === true) {
                loadMask = config;
            } else {
                Ext.apply(config, loadMask);
            }

            me.loadMask = loadMask = Ext.ComponentManager.create(config, 'loadmask');
        }

        return loadMask || null;
    },

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

        view.on({
            beforeload: 'onViewBeforeLoad',
            load: 'onViewLoaded',
            scope: this
        });
    },

    onViewBeforeLoad: function () {
        this.loading = true;

        var loadMask = this.getLoadMask();
        if (loadMask) {
            loadMask.show();
        }
    },

    onViewLoaded: function () {
        this.loading = false;

        var loadMask = this.getLoadMask();
        if (loadMask) {
            loadMask.hide();
        }
        var view = this.items.getAt(0);
        if (view.getTitle) {
            var title = view.getTitle();
            if (title) {
                this.setTitle(title);
            }
        }
    },

    /** @private */
    setBox: function (box) {
        // The resizer calls setBox which would set our left/top coordinates but
        // that is a BAD thing in a column layout which relies on flow!
        this.setSize(box.width, box.height);
    },

    /** @private */
    getState : function() {
        var me = this,
            state = me.callParent() || {};

        if (!state.collapsed) {
            me.addPropertyToState(state, 'height', me.rendered ? me.getHeight() : me.height || me.minHeight || 100);
        }

        return state;

    }
});