/** * @class Ext.Panel * @xtype panel * @extend Ext.Container * * Panels add extra functionality by providing various options for configuring a header * that is docked inside the panel. * See: * * - {@link #title} * - {@link #iconCls} * - {@link #tools} * - {@link #closable} * * It is also possible to configure the header directly using the {@link #header} * configuration. See {@link Ext.panel.Header Panel Header} for more information. * * Panels are also useful as Overlays - containers that float over your application. * If configured with `{@link #cfg-anchor: true}`, when you {@link #showBy} another * component, there will be an anchor arrow pointing to the reference component. ** @example packages=[extangular]* import { Component } from '@angular/core'* declare var Ext: any;** @Component({* selector: 'app-root-1',* styles: [`* `],* template: `* <container #item>* <panel #item* shadow="true"* title="Panel"* height="300"* width="500"* [tools]="[* { type: 'minimize', handler: toolHandler },* { type: 'refresh', handler: toolHandler },* { type: 'save', handler: toolHandler },* { type: 'search', handler: toolHandler },* { type: 'close', handler: toolHandler }* ]"* >* <p #item>Panel Body</p>* </panel>* <button #item ui="action" [handler]="showModal" margin="20 0 0 0" text="Show Modal"></button>* <panel #item* (ready)="panelReady($event)"* title="Floated Panel"* modal="true"* floated="true"* centered="true"* hideOnMaskTap="true"* [width]="this.width"* [maxHeight]="this.maxHeight"* [showAnimation]="{* type: 'popIn',* duration: 250,* easing: 'ease-out'* }"* [hideAnimation]="{* type: 'popOut',* duration: 250,* easing: 'ease-out'* }"* >* <p #item>This is a modal, centered and floated panel. hideOnMaskTap is true by default so we can tap anywhere outside the overlay to hide it.</p>* </panel>* </container>* `* })* export class AppComponent {** panel:any;** panelReady = (event) => {* this.panel = event.ext;* }** showModal = () => this.panel.show();** width = Ext.filterPlatform('ie10') ? '100%' : (Ext.os.deviceType == 'Phone') ? 260 : 400;* maxHeight = Ext.filterPlatform('ie10') ? '30%' : (Ext.os.deviceType == 'Phone') ? 220 : 400;** toolHandler = function(owner, tool) {* Ext.toast(`You clicked ${tool.config.type}`);* }* } * */ /** * @cfg {Boolean/Object} [header=null] * Pass as `false` to prevent a header from being created. * * You may also assign a header with a config object (optionally containing an `xtype`) * to custom-configure your panel's header. * * See {@link Ext.panel.Header} for all the options that may be specified here. */ /** * @cfg [border=false] * @inheritdoc */ /** * @cfg {Boolean} [bodyBorder=null] * - `true` to enable the border around the panel body (as defined by the theme) * Note that even when enabled, the bodyBorder is only visible when there are docked * items around the edges of the panel. Where the bodyBorder touches the panel's outer * border it is automatically collapsed into a single border. * * - `false` to disable the body border * * - `null` - use the value of {@link #border} as the value for bodyBorder */ /** * @cfg {Number/Boolean/String} [bodyPadding=null] * A shortcut for setting a padding style on the body element. The value can either be * a number to be applied to all sides, or a normal CSS string describing padding. */ /** * @cfg {String/Object} [bodyStyle=null] * Custom CSS styles to be applied to the panel's body element, which can be supplied * as a valid CSS style string or an object containing style property name/value pairs. * For example, these two formats are interpreted to be equivalent: * * bodyStyle: 'background:#ffc; padding:10px;' * * bodyStyle: { * background: '#ffc', * padding: '10px' * } * * @accessor set * @since 6.5.0 */ /** * @cfg {Object/Ext.Button[]} [buttons=null] * The buttons for this panel to be displayed in the `buttonToolbar` as a keyed * object (or array) of button configuration objects. * * <Panel * html="hello world" * padding={20} * buttons={{ * ok: { * text: "OK", * handler: this.onOK * } * }} * /> * * For buttons that are defined in `standardButtons` (such as `'ok'`), there is a * more convenient short-hand for this config: * * <Panel * html="hello world" * padding={20} * buttons={{ * ok: this.onOk, * cancel: this.onCancel * }} * /> * * The {@link #minButtonWidth} is used as the default * {@link Ext.Button#minWidth minWidth} for the buttons in the buttons toolbar. * @since 6.5.0 */ /** * @cfg {'top'/'right'/'bottom'/'left'} [headerPosition='top'] * The position of the header. Ignored if no {@link #cfg-header} is created. * * @since 6.5.0 */ /** * @cfg {Boolean/Object} [header=null] * Pass as `false` to prevent a header from being created. * * You may also assign a header with a config object (optionally containing an `xtype`) * to custom-configure your panel's header. * * See {@link Ext.panel.Header} for all the options that may be specified here. */ /** * @cfg [icon=null] * @inheritdoc Ext.panel.Header#cfg-icon */ /** * @cfg [iconCls=null] * @inheritdoc Ext.panel.Header#cfg-iconCls */ /** * @cfg [title=null] * @inheritdoc Ext.panel.Header#cfg-title */ /** * @cfg {Object[]/Ext.panel.Tool[]} [tools=null] * An array of {@link Ext.panel.Tool} configs/instances to be added to the header tool area. The tools are stored as * child components of the header container. */ /** * @cfg {Boolean} [anchor=false] * Configure `true` to show an anchor element pointing to the target component when this Panel is * {@link #showBy shown by} another component. */ /** * @cfg {Boolean} [closable=null] * True to display the 'close' tool button and allow the user to close the panel, false to hide the button and * disallow closing the window. * * By default, when close is requested by clicking the close button in the header, the {@link #method-close} method will be * called. This will _{@link Ext.Component#method-destroy destroy}_ the Panel and its content meaning that it may not be * reused. * * To make closing a Panel _hide_ the Panel so that it may be reused, set {@link #closeAction} to 'hide'. */ /** * @cfg {String} [closeAction='destroy'] * The action to take when the close header tool is clicked: * * - **`'{@link #method-destroy}'`** : * * {@link #method-remove remove} the window from the DOM and {@link Ext.Component#method-destroy destroy} it and all descendant * Components. The window will **not** be available to be redisplayed via the {@link #method-show} method. * * - **`'{@link #method-hide}'`** : * * {@link #method-hide} the window by setting visibility to hidden and applying negative offsets. The window will be * available to be redisplayed via the {@link #method-show} method. * * **Note:** This behavior has changed! setting *does* affect the {@link #method-close} method which will invoke the * appropriate closeAction. */ /** * @cfg {String} [closeToolText='Close panel'] * Text to be announced by screen readers when the * **close** {@link Ext.panel.Tool tool} is focused. Will also be set as the close * tool's {@link Ext.panel.Tool#cfg-tooltip tooltip} text. * * **Note:** Applicable when the panel is {@link #closable}: true * @locale */