-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-panel.Panel-method-constructor'><span id='Ext-panel.Panel'>/**
-</span></span> * @class Ext.panel.Panel
- * @extends Ext.panel.AbstractPanel
- * <p>Panel is a container that has specific functionality and structural components that make
- * it the perfect building block for application-oriented user interfaces.</p>
- * <p>Panels are, by virtue of their inheritance from {@link Ext.container.Container}, capable
- * of being configured with a {@link Ext.container.Container#layout layout}, and containing child Components.</p>
- * <p>When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.container.Container#add adding} Components
- * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
- * those child elements need to be sized using one of Ext&#39;s built-in <code><b>{@link Ext.container.Container#layout layout}</b></code> schemes. By
- * default, Panels use the {@link Ext.layout.container.Auto Auto} scheme. This simply renders
- * child components, appending them one after the other inside the Container, and <b>does not apply any sizing</b>
- * at all.</p>
- * {@img Ext.panel.Panel/panel.png Panel components}
- * <p>A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate
- * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional
- * information).</p>
- * <p>Panel also provides built-in {@link #collapsible collapsible, expandable} and {@link #closable} behavior.
- * Panels can be easily dropped into any {@link Ext.container.Container Container} or layout, and the
- * layout and rendering pipeline is {@link Ext.container.Container#add completely managed by the framework}.</p>
- * <p><b>Note:</b> By default, the <code>{@link #closable close}</code> header tool <i>destroys</i> the Panel resulting in removal of the Panel
- * and the destruction of any descendant Components. This makes the Panel object, and all its descendants <b>unusable</b>. To enable the close
- * tool to simply <i>hide</i> a Panel for later re-use, configure the Panel with <b><code>{@link #closeAction closeAction: 'hide'}</code></b>.</p>
- * <p>Usually, Panels are used as constituents within an application, in which case, they would be used as child items of Containers,
- * and would themselves use Ext.Components as child {@link #items}. However to illustrate simply rendering a Panel into the document,
- * here&#39;s how to do it:<pre><code>
-Ext.create('Ext.panel.Panel', {
- title: 'Hello',
- width: 200,
- html: '&lt;p&gt;World!&lt;/p&gt;',
- renderTo: document.body
-});
-</code></pre></p>
- * <p>A more realistic scenario is a Panel created to house input fields which will not be rendered, but used as a constituent part of a Container:<pre><code>
-var filterPanel = Ext.create('Ext.panel.Panel', {
- bodyPadding: 5, // Don&#39;t want content to crunch against the borders
- title: 'Filters',
- items: [{
- xtype: 'datefield',
- fieldLabel: 'Start date'
- }, {
- xtype: 'datefield',
- fieldLabel: 'End date'
- }]
-});
-</code></pre></p>
- * <p>Note that the Panel above is not configured to render into the document, nor is it configured with a size or position. In a real world scenario,
- * the Container into which the Panel is added will use a {@link #layout} to render, size and position its child Components.</p>
- * <p>Panels will often use specific {@link #layout}s to provide an application with shape and structure by containing and arranging child
- * Components: <pre><code>
-var resultsPanel = Ext.create('Ext.panel.Panel', {
- title: 'Results',
- width: 600,
- height: 400,
- renderTo: document.body,
- layout: {
- type: 'vbox', // Arrange child items vertically
- align: 'stretch', // Each takes up full width
- padding: 5
- },
- items: [{ // Results grid specified as a config object with an xtype of 'grid'
- xtype: 'grid',
- columns: [{header: 'Column One'}], // One header just for show. There&#39;s no data,
- store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
- flex: 1 // Use 1/3 of Container&#39;s height (hint to Box layout)
- }, {
- xtype: 'splitter' // A splitter between the two child items
- }, { // Details Panel specified as a config object (no xtype defaults to 'panel').
- title: 'Details',
- bodyPadding: 5,
- items: [{
- fieldLabel: 'Data item',
- xtype: 'textfield'
- }], // An array of form fields
- flex: 2 // Use 2/3 of Container&#39;s height (hint to Box layout)
- }]
-});
-</code></pre>
- * The example illustrates one possible method of displaying search results. The Panel contains a grid with the resulting data arranged
- * in rows. Each selected row may be displayed in detail in the Panel below. The {@link Ext.layout.container.VBox vbox} layout is used
- * to arrange the two vertically. It is configured to stretch child items horizontally to full width. Child items may either be configured
- * with a numeric height, or with a <code>flex</code> value to distribute available space proportionately.</p>
- * <p>This Panel itself may be a child item of, for exaple, a {@link Ext.tab.Panel} which will size its child items to fit within its
- * content area.</p>
- * <p>Using these techniques, as long as the <b>layout</b> is chosen and configured correctly, an application may have any level of
- * nested containment, all dynamically sized according to configuration, the user&#39;s preference and available browser size.</p>
- * @constructor
- * @param {Object} config The config object
- * @xtype panel
- */
-Ext.define('Ext.panel.Panel', {
- extend: 'Ext.panel.AbstractPanel',
- requires: [
- 'Ext.panel.Header',
- 'Ext.fx.Anim',
- 'Ext.util.KeyMap',
- 'Ext.panel.DD',
- 'Ext.XTemplate',
- 'Ext.layout.component.Dock'
- ],
- alias: 'widget.panel',
- alternateClassName: 'Ext.Panel',
-
-<span id='Ext-panel.Panel-cfg-collapsedCls'> /**
-</span> * @cfg {String} collapsedCls
- * A CSS class to add to the panel&#39;s element after it has been collapsed (defaults to
- * <code>'collapsed'</code>).
- */
- collapsedCls: 'collapsed',
-
-<span id='Ext-panel.Panel-cfg-animCollapse'> /**
-</span> * @cfg {Boolean} animCollapse
- * <code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the
- * animation (defaults to <code>true</code> if the {@link Ext.fx.Anim} class is available, otherwise <code>false</code>).
- * May also be specified as the animation duration in milliseconds.
- */
- animCollapse: Ext.enableFx,
-
-<span id='Ext-panel.Panel-cfg-minButtonWidth'> /**
-</span> * @cfg {Number} minButtonWidth
- * Minimum width of all footer toolbar buttons in pixels (defaults to <tt>75</tt>). If set, this will
- * be used as the default value for the <tt>{@link Ext.button.Button#minWidth}</tt> config of
- * each Button added to the <b>footer toolbar</b> via the {@link #fbar} or {@link #buttons} configurations.
- * It will be ignored for buttons that have a minWidth configured some other way, e.g. in their own config
- * object or via the {@link Ext.container.Container#config-defaults defaults} of their parent container.
- */
- minButtonWidth: 75,
-
-<span id='Ext-panel.Panel-cfg-collapsed'> /**
-</span> * @cfg {Boolean} collapsed
- * <code>true</code> to render the panel collapsed, <code>false</code> to render it expanded (defaults to
- * <code>false</code>).
- */
- collapsed: false,
-
-<span id='Ext-panel.Panel-cfg-collapseFirst'> /**
-</span> * @cfg {Boolean} collapseFirst
- * <code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of)
- * any other tools in the panel&#39;s title bar, <code>false</code> to render it last (defaults to <code>true</code>).
- */
- collapseFirst: true,
-
-<span id='Ext-panel.Panel-cfg-hideCollapseTool'> /**
-</span> * @cfg {Boolean} hideCollapseTool
- * <code>true</code> to hide the expand/collapse toggle button when <code>{@link #collapsible} == true</code>,
- * <code>false</code> to display it (defaults to <code>false</code>).
- */
- hideCollapseTool: false,
-
-<span id='Ext-panel.Panel-cfg-titleCollapse'> /**
-</span> * @cfg {Boolean} titleCollapse
- * <code>true</code> to allow expanding and collapsing the panel (when <code>{@link #collapsible} = true</code>)
- * by clicking anywhere in the header bar, <code>false</code>) to allow it only by clicking to tool button
- * (defaults to <code>false</code>)).
- */
- titleCollapse: false,
-
-<span id='Ext-panel.Panel-cfg-collapseMode'> /**
-</span> * @cfg {String} collapseMode
- * <p><b>Important: this config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}.</b></p>
- * <p>When <i>not</i> a direct child item of a {@link Ext.layout.container.Border border layout}, then the Panel&#39;s header remains visible, and the body is collapsed to zero dimensions.
- * If the Panel has no header, then a new header (orientated correctly depending on the {@link #collapseDirection}) will be inserted to show a the title and a re-expand tool.</p>
- * <p>When a child item of a {@link Ext.layout.container.Border border layout}, this config has two options:
- * <div class="mdetail-params"><ul>
- * <li><b><code>undefined/omitted</code></b><div class="sub-desc">When collapsed, a placeholder {@link Ext.panel.Header Header} is injected into the layout to represent the Panel
- * and to provide a UI with a Tool to allow the user to re-expand the Panel.</div></li>
- * <li><b><code>header</code></b> : <div class="sub-desc">The Panel collapses to leave its header visible as when not inside a {@link Ext.layout.container.Border border layout}.</div></li>
- * </ul></div></p>
- */
-
-<span id='Ext-panel.Panel-cfg-placeholder'> /**
-</span> * @cfg {Mixed} placeholder
- * <p><b>Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}
- * when not using the <code>'header'</code> {@link #collapseMode}.</b></p>
- * <p><b>Optional.</b> A Component (or config object for a Component) to show in place of this Panel when this Panel is collapsed by a
- * {@link Ext.layout.container.Border border layout}. Defaults to a generated {@link Ext.panel.Header Header}
- * containing a {@link Ext.panel.Tool Tool} to re-expand the Panel.</p>
- */
-
-<span id='Ext-panel.Panel-cfg-floatable'> /**
-</span> * @cfg {Boolean} floatable
- * <p><b>Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}.</b></p>
- * <tt>true</tt> to allow clicking a collapsed Panel&#39;s {@link #placeholder} to display the Panel floated
- * above the layout, <tt>false</tt> to force the user to fully expand a collapsed region by
- * clicking the expand button to see it again (defaults to <tt>true</tt>).
- */
- floatable: true,
-
-<span id='Ext-panel.Panel-cfg-collapsible'> /**
-</span> * @cfg {Boolean} collapsible
- * <p>True to make the panel collapsible and have an expand/collapse toggle Tool added into
- * the header tool button area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool (defaults to false).</p>
- * See {@link #collapseMode} and {@link #collapseDirection}
- */
- collapsible: false,
-
-<span id='Ext-panel.Panel-cfg-collapseDirection'> /**
-</span> * @cfg {Boolean} collapseDirection
- * <p>The direction to collapse the Panel when the toggle button is clicked.</p>
- * <p>Defaults to the {@link #headerPosition}</p>
- * <p><b>Important: This config is <u>ignored</u> for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}.</b></p>
- * <p>Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>.</p>
- */
-
-<span id='Ext-panel.Panel-cfg-closable'> /**
-</span> * @cfg {Boolean} closable
- * <p>True to display the 'close' tool button and allow the user to close the window, false to
- * hide the button and disallow closing the window (defaults to <code>false</code>).</p>
- * <p>By default, when close is requested by clicking the close button in the header, the {@link #close}
- * method will be called. This will <i>{@link Ext.Component#destroy destroy}</i> the Panel and its content
- * meaning that it may not be reused.</p>
- * <p>To make closing a Panel <i>hide</i> the Panel so that it may be reused, set
- * {@link #closeAction} to 'hide'.</p>
- */
- closable: false,
-
-<span id='Ext-panel.Panel-cfg-closeAction'> /**
-</span> * @cfg {String} closeAction
- * <p>The action to take when the close header tool is clicked:
- * <div class="mdetail-params"><ul>
- * <li><b><code>'{@link #destroy}'</code></b> : <b>Default</b><div class="sub-desc">
- * {@link #destroy remove} the window from the DOM and {@link Ext.Component#destroy destroy}
- * it and all descendant Components. The window will <b>not</b> be available to be
- * redisplayed via the {@link #show} method.
- * </div></li>
- * <li><b><code>'{@link #hide}'</code></b> : <div class="sub-desc">
- * {@link #hide} the window by setting visibility to hidden and applying negative offsets.
- * The window will be available to be redisplayed via the {@link #show} method.
- * </div></li>
- * </ul></div>
- * <p><b>Note:</b> This behavior has changed! setting *does* affect the {@link #close} method
- * which will invoke the approriate closeAction.
- */
- closeAction: 'destroy',
-
-<span id='Ext-panel.Panel-cfg-dockedItems'> /**
-</span> * @cfg {Object/Array} dockedItems
- * A component or series of components to be added as docked items to this panel.
- * The docked items can be docked to either the top, right, left or bottom of a panel.
- * This is typically used for things like toolbars or tab bars:
- * <pre><code>
-var panel = new Ext.panel.Panel({
- dockedItems: [{
- xtype: 'toolbar',
- dock: 'top',
- items: [{
- text: 'Docked to the top'
- }]
- }]
-});</pre></code>
- */
-
-<span id='Ext-panel.Panel-cfg-preventHeader'> /**
-</span> * @cfg {Boolean} preventHeader Prevent a Header from being created and shown. Defaults to false.
- */
- preventHeader: false,
-
-<span id='Ext-panel.Panel-cfg-headerPosition'> /**
-</span> * @cfg {String} headerPosition Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>. Defaults to <code>'top'</code>.
- */
- headerPosition: 'top',
-
-<span id='Ext-panel.Panel-cfg-frame'> /**
-</span> * @cfg {Boolean} frame
- * True to apply a frame to the panel.
- */
- frame: false,
-
-<span id='Ext-panel.Panel-cfg-frameHeader'> /**
-</span> * @cfg {Boolean} frameHeader
- * True to apply a frame to the panel panels header (if 'frame' is true).
- */
- frameHeader: true,
-
-<span id='Ext-panel.Panel-cfg-tools'> /**
-</span> * @cfg {Array} tools
- * 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. They can be accessed using {@link #down} and {#query}, as well as the other
- * component methods. The toggle tool is automatically created if {@link #collapsible} is set to true.
- * <p>Note that, apart from the toggle tool which is provided when a panel is collapsible, these
- * tools only provide the visual button. Any required functionality must be provided by adding
- * handlers that implement the necessary behavior.</p>
- * <p>Example usage:</p>
- * <pre><code>
-tools:[{
- type:'refresh',
- qtip: 'Refresh form Data',
- // hidden:true,
- handler: function(event, toolEl, panel){
- // refresh logic