/** * 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(); } }, doCollapseExpand: function(flags) { // Ensure the layout caused by expand or collapse does not propagate // to the whole dashboard. The dashboard layout is automatically // updated after the operation. this._expandCollapseRoot = this._isLayoutRoot; this._isLayoutRoot = true; this.callParent(arguments); }, afterExpand: function() { this._isLayoutRoot = this._expandCollapseRoot; this.callParent(arguments); }, afterCollapse: function() { this._isLayoutRoot = this._expandCollapseRoot; this.callParent(arguments); }, 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() { var loadMask; this.loading = true; loadMask = this.getLoadMask(); if (loadMask) { loadMask.show(); } }, onViewLoaded: function() { var loadMask, view, title; this.loading = false; loadMask = this.getLoadMask(); if (loadMask) { loadMask.hide(); } view = this.items.getAt(0); if (view.getTitle) { 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; }});