/ext-4.0.7/docs/output/Ext.tab.Panel.js
JavaScript | 1 lines | 1 code | 0 blank | 0 comment | 0 complexity | 86c9075d20e33c9fc2680790ea488ca9 MD5 | raw file
Large files files are truncated, but you can click here to view the full file
1Ext.data.JsonP.Ext_tab_Panel({"tagname":"class","html":"<div><pre class=\"hierarchy\"><h4>Alternate names</h4><div class='alternate-class-name'>Ext.TabPanel</div><h4>Hierarchy</h4><div class='subclass first-child'><a href='#!/api/Ext.Base' rel='Ext.Base' class='docClass'>Ext.Base</a><div class='subclass '><a href='#!/api/Ext.AbstractComponent' rel='Ext.AbstractComponent' class='docClass'>Ext.AbstractComponent</a><div class='subclass '><a href='#!/api/Ext.Component' rel='Ext.Component' class='docClass'>Ext.Component</a><div class='subclass '><a href='#!/api/Ext.container.AbstractContainer' rel='Ext.container.AbstractContainer' class='docClass'>Ext.container.AbstractContainer</a><div class='subclass '><a href='#!/api/Ext.container.Container' rel='Ext.container.Container' class='docClass'>Ext.container.Container</a><div class='subclass '><a href='#!/api/Ext.panel.AbstractPanel' rel='Ext.panel.AbstractPanel' class='docClass'>Ext.panel.AbstractPanel</a><div class='subclass '><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='docClass'>Ext.panel.Panel</a><div class='subclass '><strong>Ext.tab.Panel</strong></div></div></div></div></div></div></div></div><h4>Mixins</h4><div class='dependency'><a href='#!/api/Ext.util.Floating' rel='Ext.util.Floating' class='docClass'>Ext.util.Floating</a></div><div class='dependency'><a href='#!/api/Ext.util.Observable' rel='Ext.util.Observable' class='docClass'>Ext.util.Observable</a></div><div class='dependency'><a href='#!/api/Ext.util.Animate' rel='Ext.util.Animate' class='docClass'>Ext.util.Animate</a></div><div class='dependency'><a href='#!/api/Ext.state.Stateful' rel='Ext.state.Stateful' class='docClass'>Ext.state.Stateful</a></div><h4>Requires</h4><div class='dependency'><a href='#!/api/Ext.layout.container.Card' rel='Ext.layout.container.Card' class='docClass'>Ext.layout.container.Card</a></div><div class='dependency'><a href='#!/api/Ext.tab.Bar' rel='Ext.tab.Bar' class='docClass'>Ext.tab.Bar</a></div><h4>Files</h4><div class='dependency'><a href='source/Panel4.html#Ext-tab-Panel' target='_blank'>Panel.js</a></div></pre><div class='doc-contents'><p>A basic tab container. TabPanels can be used exactly like a standard <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Ext.panel.Panel</a> for\nlayout purposes, but also have special support for containing child Components\n(<code><a href=\"#!/api/Ext.container.Container-cfg-items\" rel=\"Ext.container.Container-cfg-items\" class=\"docClass\">items</a></code>) that are managed using a\n<a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">CardLayout layout manager</a>, and displayed as separate tabs.</p>\n\n<p><strong>Note:</strong> By default, a tab's close tool <em>destroys</em> the child tab Component and all its descendants.\nThis makes the child tab Component, and all its descendants <strong>unusable</strong>. To enable re-use of a tab,\nconfigure the TabPanel with <code><a href=\"#!/api/Ext.tab.Panel-cfg-autoDestroy\" rel=\"Ext.tab.Panel-cfg-autoDestroy\" class=\"docClass\">autoDestroy: false</a></code>.</p>\n\n<h2>TabPanel's layout</h2>\n\n<p>TabPanels use a Dock layout to position the <a href=\"#!/api/Ext.tab.Bar\" rel=\"Ext.tab.Bar\" class=\"docClass\">TabBar</a> at the top of the widget.\nPanels added to the TabPanel will have their header hidden by default because the Tab will\nautomatically take the Panel's configured title and icon.</p>\n\n<p>TabPanels use their <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">header</a> or <a href=\"#!/api/Ext.panel.Panel-cfg-fbar\" rel=\"Ext.panel.Panel-cfg-fbar\" class=\"docClass\">footer</a>\nelement (depending on the <a href=\"#!/api/Ext.tab.Panel-cfg-tabPosition\" rel=\"Ext.tab.Panel-cfg-tabPosition\" class=\"docClass\">tabPosition</a> configuration) to accommodate the tab selector buttons.\nThis means that a TabPanel will not display any configured title, and will not display any configured\nheader <a href=\"#!/api/Ext.panel.Panel-cfg-tools\" rel=\"Ext.panel.Panel-cfg-tools\" class=\"docClass\">tools</a>.</p>\n\n<p>To display a header, embed the TabPanel in a <a href=\"#!/api/Ext.panel.Panel\" rel=\"Ext.panel.Panel\" class=\"docClass\">Panel</a> which uses\n<code><a href=\"#!/api/Ext.container.Container-cfg-layout\" rel=\"Ext.container.Container-cfg-layout\" class=\"docClass\">layout: 'fit'</a></code>.</p>\n\n<h2>Controlling tabs</h2>\n\n<p>Configuration options for the <a href=\"#!/api/Ext.tab.Tab\" rel=\"Ext.tab.Tab\" class=\"docClass\">Ext.tab.Tab</a> that represents the component can be passed in\nby specifying the tabConfig option:</p>\n\n<pre class='inline-example '><code>Ext.create('Ext.tab.Panel', {\n width: 400,\n height: 400,\n renderTo: document.body,\n items: [{\n title: 'Foo'\n }, {\n title: 'Bar',\n tabConfig: {\n title: 'Custom Title',\n tooltip: 'A button tooltip'\n }\n }]\n});\n</code></pre>\n\n<h1>Examples</h1>\n\n<p>Here is a basic TabPanel rendered to the body. This also shows the useful configuration <a href=\"#!/api/Ext.tab.Panel-cfg-activeTab\" rel=\"Ext.tab.Panel-cfg-activeTab\" class=\"docClass\">activeTab</a>,\nwhich allows you to set the active tab on render. If you do not set an <a href=\"#!/api/Ext.tab.Panel-cfg-activeTab\" rel=\"Ext.tab.Panel-cfg-activeTab\" class=\"docClass\">activeTab</a>, no tabs will be\nactive by default.</p>\n\n<pre class='inline-example '><code>Ext.create('Ext.tab.Panel', {\n width: 300,\n height: 200,\n activeTab: 0,\n items: [\n {\n title: 'Tab 1',\n bodyPadding: 10,\n html : 'A simple tab'\n },\n {\n title: 'Tab 2',\n html : 'Another one'\n }\n ],\n renderTo : Ext.getBody()\n});\n</code></pre>\n\n<p>It is easy to control the visibility of items in the tab bar. Specify hidden: true to have the\ntab button hidden initially. Items can be subsequently hidden and show by accessing the\ntab property on the child item.</p>\n\n<pre class='inline-example '><code>var tabs = Ext.create('Ext.tab.Panel', {\n width: 400,\n height: 400,\n renderTo: document.body,\n items: [{\n title: 'Home',\n html: 'Home',\n itemId: 'home'\n }, {\n title: 'Users',\n html: 'Users',\n itemId: 'users',\n hidden: true\n }, {\n title: 'Tickets',\n html: 'Tickets',\n itemId: 'tickets'\n }]\n});\n\nsetTimeout(function(){\n tabs.child('#home').tab.hide();\n var users = tabs.child('#users');\n users.tab.show();\n tabs.setActiveTab(users);\n}, 1000);\n</code></pre>\n\n<p>You can remove the background of the TabBar by setting the <a href=\"#!/api/Ext.tab.Panel-cfg-plain\" rel=\"Ext.tab.Panel-cfg-plain\" class=\"docClass\">plain</a> property to <code>true</code>.</p>\n\n<pre class='inline-example '><code>Ext.create('Ext.tab.Panel', {\n width: 300,\n height: 200,\n activeTab: 0,\n plain: true,\n items: [\n {\n title: 'Tab 1',\n bodyPadding: 10,\n html : 'A simple tab'\n },\n {\n title: 'Tab 2',\n html : 'Another one'\n }\n ],\n renderTo : Ext.getBody()\n});\n</code></pre>\n\n<p>Another useful configuration of TabPanel is <a href=\"#!/api/Ext.tab.Panel-cfg-tabPosition\" rel=\"Ext.tab.Panel-cfg-tabPosition\" class=\"docClass\">tabPosition</a>. This allows you to change the\nposition where the tabs are displayed. The available options for this are <code>'top'</code> (default) and\n<code>'bottom'</code>.</p>\n\n<pre class='inline-example '><code>Ext.create('Ext.tab.Panel', {\n width: 300,\n height: 200,\n activeTab: 0,\n bodyPadding: 10,\n tabPosition: 'bottom',\n items: [\n {\n title: 'Tab 1',\n html : 'A simple tab'\n },\n {\n title: 'Tab 2',\n html : 'Another one'\n }\n ],\n renderTo : Ext.getBody()\n});\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.tab.Panel-method-setActiveTab\" rel=\"Ext.tab.Panel-method-setActiveTab\" class=\"docClass\">setActiveTab</a> is a very useful method in TabPanel which will allow you to change the\ncurrent active tab. You can either give it an index or an instance of a tab. For example:</p>\n\n<pre class='inline-example '><code>var tabs = Ext.create('Ext.tab.Panel', {\n items: [\n {\n id : 'my-tab',\n title: 'Tab 1',\n html : 'A simple tab'\n },\n {\n title: 'Tab 2',\n html : 'Another one'\n }\n ],\n renderTo : Ext.getBody()\n});\n\nvar tab = Ext.getCmp('my-tab');\n\nExt.create('Ext.button.Button', {\n renderTo: Ext.getBody(),\n text : 'Select the first tab',\n scope : this,\n handler : function() {\n tabs.setActiveTab(tab);\n }\n});\n\nExt.create('Ext.button.Button', {\n text : 'Select the second tab',\n scope : this,\n handler : function() {\n tabs.setActiveTab(1);\n },\n renderTo : Ext.getBody()\n});\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.tab.Panel-method-getActiveTab\" rel=\"Ext.tab.Panel-method-getActiveTab\" class=\"docClass\">getActiveTab</a> is a another useful method in TabPanel which will return the current active tab.</p>\n\n<pre class='inline-example '><code>var tabs = Ext.create('Ext.tab.Panel', {\n items: [\n {\n title: 'Tab 1',\n html : 'A simple tab'\n },\n {\n title: 'Tab 2',\n html : 'Another one'\n }\n ],\n renderTo : Ext.getBody()\n});\n\nExt.create('Ext.button.Button', {\n text : 'Get active tab',\n scope : this,\n handler : function() {\n var tab = tabs.getActiveTab();\n alert('Current tab: ' + tab.title);\n },\n renderTo : Ext.getBody()\n});\n</code></pre>\n\n<p>Adding a new tab is very simple with a TabPanel. You simple call the <a href=\"#!/api/Ext.tab.Panel-event-add\" rel=\"Ext.tab.Panel-event-add\" class=\"docClass\">add</a> method with an config\nobject for a panel.</p>\n\n<pre class='inline-example '><code>var tabs = Ext.create('Ext.tab.Panel', {\n items: [\n {\n title: 'Tab 1',\n html : 'A simple tab'\n },\n {\n title: 'Tab 2',\n html : 'Another one'\n }\n ],\n renderTo : Ext.getBody()\n});\n\nExt.create('Ext.button.Button', {\n text : 'New tab',\n scope : this,\n handler : function() {\n var tab = tabs.add({\n // we use the tabs.items property to get the length of current items/tabs\n title: 'Tab ' + (tabs.items.length + 1),\n html : 'Another one'\n });\n\n tabs.setActiveTab(tab);\n },\n renderTo : Ext.getBody()\n});\n</code></pre>\n\n<p>Additionally, removing a tab is very also simple with a TabPanel. You simple call the <a href=\"#!/api/Ext.tab.Panel-event-remove\" rel=\"Ext.tab.Panel-event-remove\" class=\"docClass\">remove</a> method\nwith an config object for a panel.</p>\n\n<pre class='inline-example '><code>var tabs = Ext.create('Ext.tab.Panel', {\n items: [\n {\n title: 'Tab 1',\n html : 'A simple tab'\n },\n {\n id : 'remove-this-tab',\n title: 'Tab 2',\n html : 'Another one'\n }\n ],\n renderTo : Ext.getBody()\n});\n\nExt.create('Ext.button.Button', {\n text : 'Remove tab',\n scope : this,\n handler : function() {\n var tab = Ext.getCmp('remove-this-tab');\n tabs.remove(tab);\n },\n renderTo : Ext.getBody()\n});\n</code></pre>\n</div><div class='members'><div id='m-cfg'><div class='definedBy'>Defined By</div><h3 class='members-title'>Config options</h3><div class='subsection'><div id='cfg-activeItem' class='member first-child not-inherited'><a href='#' class='side not-expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.tab.Panel' rel='Ext.tab.Panel' class='definedIn docClass'>Ext.tab.Panel</a><br/><a href='source/Panel4.html#Ext-tab-Panel-cfg-activeItem' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.tab.Panel-cfg-activeItem' class='name not-expandable'>activeItem</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/Number\" rel=\"Number\" class=\"docClass\">Number</a></span></div><div class='description'><div class='short'><p>Doesn't apply for <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">TabPanel</a>, use <a href=\"#!/api/Ext.tab.Panel-cfg-activeTab\" rel=\"Ext.tab.Panel-cfg-activeTab\" class=\"docClass\">activeTab</a> instead.</p>\n</div><div class='long'><p>Doesn't apply for <a href=\"#!/api/Ext.tab.Panel\" rel=\"Ext.tab.Panel\" class=\"docClass\">TabPanel</a>, use <a href=\"#!/api/Ext.tab.Panel-cfg-activeTab\" rel=\"Ext.tab.Panel-cfg-activeTab\" class=\"docClass\">activeTab</a> instead.</p>\n</div></div></div><div id='cfg-activeTab' class='member not-inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.tab.Panel' rel='Ext.tab.Panel' class='definedIn docClass'>Ext.tab.Panel</a><br/><a href='source/Panel4.html#Ext-tab-Panel-cfg-activeTab' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.tab.Panel-cfg-activeTab' class='name expandable'>activeTab</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/Number\" rel=\"Number\" class=\"docClass\">Number</a>/<a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a></span></div><div class='description'><div class='short'>The tab to activate initially. ...</div><div class='long'><p>The tab to activate initially. Either an ID, index or the tab component itself.</p>\n</div></div></div><div id='cfg-animCollapse' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-animCollapse' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-animCollapse' class='name expandable'>animCollapse</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true\nif the Ext....</div><div class='long'><p><code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the animation (defaults to <code>true</code>\nif the <a href=\"#!/api/Ext.fx.Anim\" rel=\"Ext.fx.Anim\" class=\"docClass\">Ext.fx.Anim</a> class is available, otherwise <code>false</code>). May also be specified as the animation\nduration in milliseconds.</p>\n</div></div></div><div id='cfg-autoDestroy' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.container.AbstractContainer' rel='Ext.container.AbstractContainer' class='definedIn docClass'>Ext.container.AbstractContainer</a><br/><a href='source/AbstractContainer.html#Ext-container-AbstractContainer-cfg-autoDestroy' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.container.AbstractContainer-cfg-autoDestroy' class='name expandable'>autoDestroy</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>If true the container will automatically destroy any contained component that is removed from it, else\ndestruction mu...</div><div class='long'><p>If true the container will automatically destroy any contained component that is removed from it, else\ndestruction must be handled manually.\nDefaults to true.</p>\n<p>Defaults to: <code>true</code></p></div></div></div><div id='cfg-autoEl' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.AbstractComponent' rel='Ext.AbstractComponent' class='definedIn docClass'>Ext.AbstractComponent</a><br/><a href='source/AbstractComponent.html#Ext-AbstractComponent-cfg-autoEl' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.AbstractComponent-cfg-autoEl' class='name expandable'>autoEl</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a></span></div><div class='description'><div class='short'>A tag name or DomHelper spec used to create the Element which will\nencapsulate this Component. ...</div><div class='long'><p>A tag name or <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">DomHelper</a> spec used to create the <a href=\"#!/api/Ext.AbstractComponent-method-getEl\" rel=\"Ext.AbstractComponent-method-getEl\" class=\"docClass\">Element</a> which will\nencapsulate this Component.</p>\n\n<p>You do not normally need to specify this. For the base classes <a href=\"#!/api/Ext.Component\" rel=\"Ext.Component\" class=\"docClass\">Ext.Component</a> and\n<a href=\"#!/api/Ext.container.Container\" rel=\"Ext.container.Container\" class=\"docClass\">Ext.container.Container</a>, this defaults to <strong>'div'</strong>. The more complex Sencha classes use a more\ncomplex DOM structure specified by their own <a href=\"#!/api/Ext.AbstractComponent-cfg-renderTpl\" rel=\"Ext.AbstractComponent-cfg-renderTpl\" class=\"docClass\">renderTpl</a>s.</p>\n\n<p>This is intended to allow the developer to create application-specific utility Components encapsulated by\ndifferent DOM elements. Example usage:</p>\n\n<pre><code>{\n xtype: 'component',\n autoEl: {\n tag: 'img',\n src: 'http://www.example.com/example.jpg'\n }\n}, {\n xtype: 'component',\n autoEl: {\n tag: 'blockquote',\n html: 'autoEl is cool!'\n }\n}, {\n xtype: 'container',\n autoEl: 'ul',\n cls: 'ux-unordered-list',\n items: {\n xtype: 'component',\n autoEl: 'li',\n html: 'First list item'\n }\n}\n</code></pre>\n</div></div></div><div id='cfg-autoRender' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.AbstractComponent' rel='Ext.AbstractComponent' class='definedIn docClass'>Ext.AbstractComponent</a><br/><a href='source/AbstractComponent.html#Ext-AbstractComponent-cfg-autoRender' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.AbstractComponent-cfg-autoRender' class='name expandable'>autoRender</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.Element\" rel=\"Ext.Element\" class=\"docClass\">Ext.Element</a></span></div><div class='description'><div class='short'>This config is intended mainly for non-floating Components which may or may not be shown. ...</div><div class='long'><p>This config is intended mainly for non-<a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> Components which may or may not be shown. Instead of using\n<a href=\"#!/api/Ext.AbstractComponent-cfg-renderTo\" rel=\"Ext.AbstractComponent-cfg-renderTo\" class=\"docClass\">renderTo</a> in the configuration, and rendering upon construction, this allows a Component to render itself\nupon first <em><a href=\"#!/api/Ext.AbstractComponent-event-show\" rel=\"Ext.AbstractComponent-event-show\" class=\"docClass\">show</a></em>. If <a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> is true, the value of this config is omited as if it is <code>true</code>.</p>\n\n<p>Specify as <code>true</code> to have this Component render to the document body upon first show.</p>\n\n<p>Specify as an element, or the ID of an element to have this Component render to a specific element upon first\nshow.</p>\n\n<p><strong>This defaults to <code>true</code> for the <a href=\"#!/api/Ext.window.Window\" rel=\"Ext.window.Window\" class=\"docClass\">Window</a> class.</strong></p>\n<p>Defaults to: <code>false</code></p></div></div></div><div id='cfg-autoScroll' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Component' rel='Ext.Component' class='definedIn docClass'>Ext.Component</a><br/><a href='source/Component.html#Ext-Component-cfg-autoScroll' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.Component-cfg-autoScroll' class='name expandable'>autoScroll</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,\nfalse...</div><div class='long'><p><code>true</code> to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,\n<code>false</code> to clip any overflowing content.</p>\n<p>Defaults to: <code>false</code></p></div></div></div><div id='cfg-autoShow' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.AbstractComponent' rel='Ext.AbstractComponent' class='definedIn docClass'>Ext.AbstractComponent</a><br/><a href='source/AbstractComponent.html#Ext-AbstractComponent-cfg-autoShow' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.AbstractComponent-cfg-autoShow' class='name expandable'>autoShow</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>True to automatically show the component upon creation. ...</div><div class='long'><p>True to automatically show the component upon creation. This config option may only be used for\n<a href=\"#!/api/Ext.AbstractComponent-cfg-floating\" rel=\"Ext.AbstractComponent-cfg-floating\" class=\"docClass\">floating</a> components or components that use <a href=\"#!/api/Ext.AbstractComponent-cfg-autoRender\" rel=\"Ext.AbstractComponent-cfg-autoRender\" class=\"docClass\">autoRender</a>. Defaults to false.</p>\n<p>Defaults to: <code>false</code></p></div></div></div><div id='cfg-baseCls' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.AbstractPanel' rel='Ext.panel.AbstractPanel' class='definedIn docClass'>Ext.panel.AbstractPanel</a><br/><a href='source/AbstractPanel.html#Ext-panel-AbstractPanel-cfg-baseCls' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.AbstractPanel-cfg-baseCls' class='name expandable'>baseCls</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'>The base CSS class to apply to this panel's element. ...</div><div class='long'><p>The base CSS class to apply to this panel's element.</p>\n<p>Defaults to: <code>"x-panel"</code></p></div></div></div><div id='cfg-bbar' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-bbar' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-bbar' class='name expandable'>bbar</a><span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>[]</span></div><div class='description'><div class='short'>Convenience config. ...</div><div class='long'><p>Convenience config. Short for 'Bottom Bar'.</p>\n\n<pre><code>bbar: [\n { xtype: 'button', text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n xtype: 'toolbar',\n dock: 'bottom',\n items: [\n { xtype: 'button', text: 'Button 1' }\n ]\n}]\n</code></pre>\n</div></div></div><div id='cfg-bodyBorder' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.AbstractPanel' rel='Ext.panel.AbstractPanel' class='definedIn docClass'>Ext.panel.AbstractPanel</a><br/><a href='source/AbstractPanel.html#Ext-panel-AbstractPanel-cfg-bodyBorder' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.AbstractPanel-cfg-bodyBorder' class='name expandable'>bodyBorder</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>A shortcut to add or remove the border on the body of a panel. ...</div><div class='long'><p>A shortcut to add or remove the border on the body of a panel. This only applies to a panel\nwhich has the <a href=\"#!/api/Ext.panel.AbstractPanel-cfg-frame\" rel=\"Ext.panel.AbstractPanel-cfg-frame\" class=\"docClass\">frame</a> configuration set to <code>true</code>.</p>\n</div></div></div><div id='cfg-bodyCls' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.AbstractPanel' rel='Ext.panel.AbstractPanel' class='definedIn docClass'>Ext.panel.AbstractPanel</a><br/><a href='source/AbstractPanel.html#Ext-panel-AbstractPanel-cfg-bodyCls' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.AbstractPanel-cfg-bodyCls' class='name expandable'>bodyCls</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>[]</span></div><div class='description'><div class='short'>A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element. ...</div><div class='long'><p>A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element.\nThe following examples are all valid:</p>\n\n<pre><code>bodyCls: 'foo'\nbodyCls: 'foo bar'\nbodyCls: ['foo', 'bar']\n</code></pre>\n\n</div></div></div><div id='cfg-bodyPadding' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.AbstractPanel' rel='Ext.panel.AbstractPanel' class='definedIn docClass'>Ext.panel.AbstractPanel</a><br/><a href='source/AbstractPanel.html#Ext-panel-AbstractPanel-cfg-bodyPadding' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.AbstractPanel-cfg-bodyPadding' class='name expandable'>bodyPadding</a><span> : <a href=\"#!/api/Number\" rel=\"Number\" class=\"docClass\">Number</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'>A shortcut for setting a padding style on the body element. ...</div><div class='long'><p>A shortcut for setting a padding style on the body element. The value can either be\na number to be applied to all sides, or a normal css string describing padding.</p>\n</div></div></div><div id='cfg-bodyStyle' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.AbstractPanel' rel='Ext.panel.AbstractPanel' class='definedIn docClass'>Ext.panel.AbstractPanel</a><br/><a href='source/AbstractPanel.html#Ext-panel-AbstractPanel-cfg-bodyStyle' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.AbstractPanel-cfg-bodyStyle' class='name expandable'>bodyStyle</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/Function\" rel=\"Function\" class=\"docClass\">Function</a></span></div><div class='description'><div class='short'>Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string,\nan ob...</div><div class='long'><p>Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string,\nan object containing style property name/value pairs or a function that returns such a string or object.\nFor example, these two formats are interpreted to be equivalent:</p>\n\n<pre><code>bodyStyle: 'background:#ffc; padding:10px;'\n\nbodyStyle: {\n background: '#ffc',\n padding: '10px'\n}\n</code></pre>\n\n</div></div></div><div id='cfg-border' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.AbstractComponent' rel='Ext.AbstractComponent' class='definedIn docClass'>Ext.AbstractComponent</a><br/><a href='source/AbstractComponent.html#Ext-AbstractComponent-cfg-border' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.AbstractComponent-cfg-border' class='name expandable'>border</a><span> : <a href=\"#!/api/Number\" rel=\"Number\" class=\"docClass\">Number</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'>Specifies the border for this component. ...</div><div class='long'><p>Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can\nbe a CSS style specification for each style, for example: '10 5 3 10'.</p>\n</div></div></div><div id='cfg-bubbleEvents' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.container.AbstractContainer' rel='Ext.container.AbstractContainer' class='definedIn docClass'>Ext.container.AbstractContainer</a><br/><a href='source/AbstractContainer.html#Ext-container-AbstractContainer-cfg-bubbleEvents' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.container.AbstractContainer-cfg-bubbleEvents' class='name expandable'>bubbleEvents</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>[]</span></div><div class='description'><div class='short'>An array of events that, when fired, should be bubbled to any parent container. ...</div><div class='long'><p>An array of events that, when fired, should be bubbled to any parent container.\nSee <a href=\"#!/api/Ext.util.Observable-method-enableBubble\" rel=\"Ext.util.Observable-method-enableBubble\" class=\"docClass\">Ext.util.Observable.enableBubble</a>.\nDefaults to <code>['add', 'remove']</code>.\n\n<p>Defaults to: <code>["add", "remove"]</code></p></div></div></div><div id='cfg-buttonAlign' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-buttonAlign' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-buttonAlign' class='name expandable'>buttonAlign</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'>The alignment of any buttons added to this panel. ...</div><div class='long'><p>The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to\n'right' for buttons/fbar, 'left' for other toolbar types).</p>\n\n<p><strong>NOTE:</strong> The prefered way to specify toolbars is to use the dockedItems config. Instead of buttonAlign you\nwould add the layout: { pack: 'start' | 'center' | 'end' } option to the dockedItem config.</p>\n</div></div></div><div id='cfg-buttons' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-buttons' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-buttons' class='name expandable'>buttons</a><span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>[]</span></div><div class='description'><div class='short'>Convenience config used for adding buttons docked to the bottom of the panel. ...</div><div class='long'><p>Convenience config used for adding buttons docked to the bottom of the panel. This is a\nsynonym for the <a href=\"#!/api/Ext.panel.Panel-cfg-fbar\" rel=\"Ext.panel.Panel-cfg-fbar\" class=\"docClass\">fbar</a> config.</p>\n\n<pre><code>buttons: [\n { text: 'Button 1' }\n]\n</code></pre>\n\n<p>is equivalent to</p>\n\n<pre><code>dockedItems: [{\n xtype: 'toolbar',\n dock: 'bottom',\n ui: 'footer',\n defaults: {minWidth: <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a>},\n items: [\n { xtype: 'component', flex: 1 },\n { xtype: 'button', text: 'Button 1' }\n ]\n}]\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.panel.Panel-cfg-minButtonWidth\" rel=\"Ext.panel.Panel-cfg-minButtonWidth\" class=\"docClass\">minButtonWidth</a> is used as the default <a href=\"#!/api/Ext.button.Button-cfg-minWidth\" rel=\"Ext.button.Button-cfg-minWidth\" class=\"docClass\">minWidth</a> for\neach of the buttons in the buttons toolbar.</p>\n</div></div></div><div id='cfg-childEls' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.AbstractComponent' rel='Ext.AbstractComponent' class='definedIn docClass'>Ext.AbstractComponent</a><br/><a href='source/AbstractComponent.html#Ext-AbstractComponent-cfg-childEls' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.AbstractComponent-cfg-childEls' class='name expandable'>childEls</a><span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>[]</span></div><div class='description'><div class='short'>An array describing the child elements of the Component. ...</div><div class='long'><p>An array describing the child elements of the Component. Each member of the array\nis an object with these properties:</p>\n\n<ul>\n<li><code>name</code> - The property name on the Component for the child element.</li>\n<li><code>itemId</code> - The id to combine with the Component's id that is the id of the child element.</li>\n<li><code>id</code> - The id of the child element.</li>\n</ul>\n\n\n<p>If the array member is a string, it is equivalent to <code>{ name: m, itemId: m }</code>.</p>\n\n<p>For example, a Component which renders a title and body text:</p>\n\n<pre><code>Ext.create('Ext.Component', {\n renderTo: Ext.getBody(),\n renderTpl: [\n '<h1 id=\"{id}-title\">{title}</h1>',\n '<p>{msg}</p>',\n ],\n renderData: {\n title: \"Error\",\n msg: \"Something went wrong\"\n },\n childEls: [\"title\"],\n listeners: {\n afterrender: function(cmp){\n // After rendering the component will have a title property\n cmp.title.setStyle({color: \"red\"});\n }\n }\n});\n</code></pre>\n\n<p>A more flexible, but somewhat slower, approach is <a href=\"#!/api/Ext.AbstractComponent-cfg-renderSelectors\" rel=\"Ext.AbstractComponent-cfg-renderSelectors\" class=\"docClass\">renderSelectors</a>.</p>\n</div></div></div><div id='cfg-closable' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-closable' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-closable' class='name expandable'>closable</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>True to display the 'close' tool button and allow the user to close the window, false to hide the button and\ndisallow...</div><div class='long'><p>True to display the 'close' tool button and allow the user to close the window, false to hide the button and\ndisallow closing the window.</p>\n\n<p>By default, when close is requested by clicking the close button in the header, the <a href=\"#!/api/Ext.panel.Panel-method-close\" rel=\"Ext.panel.Panel-method-close\" class=\"docClass\">close</a> method will be\ncalled. This will <em><a href=\"#!/api/Ext.Component-event-destroy\" rel=\"Ext.Component-event-destroy\" class=\"docClass\">destroy</a></em> the Panel and its content meaning that it may not be\nreused.</p>\n\n<p>To make closing a Panel <em>hide</em> the Panel so that it may be reused, set <a href=\"#!/api/Ext.panel.Panel-cfg-closeAction\" rel=\"Ext.panel.Panel-cfg-closeAction\" class=\"docClass\">closeAction</a> to 'hide'.</p>\n<p>Defaults to: <code>false</code></p></div></div></div><div id='cfg-closeAction' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-closeAction' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-closeAction' class='name expandable'>closeAction</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'>The action to take when the close header tool is clicked:\n\n\n'destroy' :\n\nremove the window from the DOM and destroy i...</div><div class='long'><p>The action to take when the close header tool is clicked:</p>\n\n<ul>\n<li><p><strong><code>'<a href=\"#!/api/Ext.panel.Panel-event-destroy\" rel=\"Ext.panel.Panel-event-destroy\" class=\"docClass\">destroy</a>'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.panel.Panel-event-destroy\" rel=\"Ext.panel.Panel-event-destroy\" class=\"docClass\">remove</a> the window from the DOM and <a href=\"#!/api/Ext.Component-event-destroy\" rel=\"Ext.Component-event-destroy\" class=\"docClass\">destroy</a> it and all descendant\nComponents. The window will <strong>not</strong> be available to be redisplayed via the <a href=\"#!/api/Ext.panel.Panel-event-show\" rel=\"Ext.panel.Panel-event-show\" class=\"docClass\">show</a> method.</p></li>\n<li><p><strong><code>'<a href=\"#!/api/Ext.panel.Panel-event-hide\" rel=\"Ext.panel.Panel-event-hide\" class=\"docClass\">hide</a>'</code></strong> :</p>\n\n<p><a href=\"#!/api/Ext.panel.Panel-event-hide\" rel=\"Ext.panel.Panel-event-hide\" class=\"docClass\">hide</a> the window by setting visibility to hidden and applying negative offsets. The window will be\navailable to be redisplayed via the <a href=\"#!/api/Ext.panel.Panel-event-show\" rel=\"Ext.panel.Panel-event-show\" class=\"docClass\">show</a> method.</p></li>\n</ul>\n\n\n<p><strong>Note:</strong> This behavior has changed! setting <em>does</em> affect the <a href=\"#!/api/Ext.panel.Panel-method-close\" rel=\"Ext.panel.Panel-method-close\" class=\"docClass\">close</a> method which will invoke the\napproriate closeAction.</p>\n<p>Defaults to: <code>"destroy"</code></p></div></div></div><div id='cfg-cls' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.AbstractComponent' rel='Ext.AbstractComponent' class='definedIn docClass'>Ext.AbstractComponent</a><br/><a href='source/AbstractComponent.html#Ext-AbstractComponent-cfg-cls' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.AbstractComponent-cfg-cls' class='name expandable'>cls</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'>An optional extra CSS class that will be added to this component's Element. ...</div><div class='long'><p>An optional extra CSS class that will be added to this component's Element. This can be useful\nfor adding customized styles to the component or any of its children using standard CSS rules.</p>\n<p>Defaults to: <code>""</code></p></div></div></div><div id='cfg-collapseDirection' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-collapseDirection' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-collapseDirection' class='name expandable'>collapseDirection</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>The direction to collapse the Panel when the toggle button is clicked. ...</div><div class='long'><p>The direction to collapse the Panel when the toggle button is clicked.</p>\n\n<p>Defaults to the <a href=\"#!/api/Ext.panel.Panel-cfg-headerPosition\" rel=\"Ext.panel.Panel-cfg-headerPosition\" class=\"docClass\">headerPosition</a></p>\n\n<p><strong>Important: This config is <em>ignored</em> for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</strong></p>\n\n<p>Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>.</p>\n</div></div></div><div id='cfg-collapseFirst' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-collapseFirst' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-collapseFirst' class='name expandable'>collapseFirst</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in\nthe pane...</div><div class='long'><p><code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in\nthe panel's title bar, <code>false</code> to render it last.</p>\n<p>Defaults to: <code>true</code></p></div></div></div><div id='cfg-collapseMode' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-collapseMode' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-collapseMode' class='name expandable'>collapseMode</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'>Important: this config is only effective for collapsible Panels which are direct child items of a\nborder layout. ...</div><div class='long'><p><strong>Important: this config is only effective for <a href=\"#!/api/Ext.panel.Panel-cfg-collapsible\" rel=\"Ext.panel.Panel-cfg-collapsible\" class=\"docClass\">collapsible</a> Panels which are direct child items of a\n<a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>.</strong></p>\n\n<p>When <em>not</em> a direct child item of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, then the Panel's header\nremains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header\n(orientated correctly depending on the <a href=\"#!/api/Ext.panel.Panel-cfg-collapseDirection\" rel=\"Ext.panel.Panel-cfg-collapseDirection\" class=\"docClass\">collapseDirection</a>) will be inserted to show a the title and a re-\nexpand tool.</p>\n\n<p>When a child item of a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border layout</a>, this config has two options:</p>\n\n<ul>\n<li><p><strong><code>undefined/omitted</code></strong></p>\n\n<p>When collapsed, a placeholder <a href=\"#!/api/Ext.panel.Header\" rel=\"Ext.panel.Header\" class=\"docClass\">Header</a> is injected into the layout to represent the Panel\nand to provide a UI with a Tool to allow the user to re-expand the Panel.</p></li>\n<li><p><strong><code>header</code></strong> :</p>\n\n<p>The Panel collapses to leave its header visible as when not inside a <a href=\"#!/api/Ext.layout.container.Border\" rel=\"Ext.layout.container.Border\" class=\"docClass\">border\nlayout</a>.</p></li>\n</ul>\n\n</div></div></div><div id='cfg-collapsed' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-collapsed' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-collapsed' class='name expandable'>collapsed</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>true to render the panel collapsed, false to render it expanded. ...</div><div class='long'><p><code>true</code> to render the panel collapsed, <code>false</code> to render it expanded.</p>\n<p>Defaults to: <code>false</code></p></div></div></div><div id='cfg-collapsedCls' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-collapsedCls' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-collapsedCls' class='name expandable'>collapsedCls</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'>A CSS class to add to the panel's element after it has been collapsed. ...</div><div class='long'><p>A CSS class to add to the panel's element after it has been collapsed.</p>\n<p>Defaults to: <code>"collapsed"</code></p></div></div></div><div id='cfg-collapsible' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.panel.Panel' rel='Ext.panel.Panel' class='definedIn docClass'>Ext.panel.Panel</a><br/><a href='source/Panel3.html#Ext-panel-Panel-cfg-collapsible' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.panel.Panel-cfg-collapsible' class='name expandable'>collapsible</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button\narea. ...</div><div class='long'><p>True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button\narea. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool.</p>\n\n<p>See <a href=\"#!/api/Ext.panel.Panel-cfg-collapseMode\" rel=\"Ext.panel.Panel-cfg-collapseMode\" class=\"docClass\">collapseMode</a> and <a href=\"#!/api/Ext.panel.Panel-cfg-collapseDirection\" rel=\"Ext.panel.Panel-cfg-collapseDirection\" class=\"docClass\">collapseDirection</a></p>\n<p>Defaults to: <code>false</code></p></div></div></div><div id='cfg-componentCls' class='member inherited'><a href='#' class='side not-expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.AbstractComponent' rel='Ext.AbstractComponent' class='definedIn docClass'>Ext.AbstractComponent</a><br/><a href='source/AbstractComponent.html#Ext-AbstractComponent-cfg-componentCls' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.AbstractComponent-cfg-componentCls' class='name not-expandable'>componentCls</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span></div><div class='description'><div class='short'><p>CSS Class to be added to a components root level element to give distinction to it via styling.</p>\n</div><div class='long'><p>CSS Class to be added to a components root level element…Large files files are truncated, but you can click here to view the full file