/ext-4.0.7/docs/output/Ext.grid.Panel.js
JavaScript | 1 lines | 1 code | 0 blank | 0 comment | 0 complexity | 6fd8f7b61c8c50aca2df9342658f4bc7 MD5 | raw file
Large files files are truncated, but you can click here to view the full file
- Ext.data.JsonP.Ext_grid_Panel({"tagname":"class","html":"<div><pre class=\"hierarchy\"><h4>Alternate names</h4><div class='alternate-class-name'>Ext.list.ListView</div><div class='alternate-class-name'>Ext.ListView</div><div class='alternate-class-name'>Ext.grid.GridPanel</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 '><a href='#!/api/Ext.panel.Table' rel='Ext.panel.Table' class='docClass'>Ext.panel.Table</a><div class='subclass '><strong>Ext.grid.Panel</strong></div></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.grid.View' rel='Ext.grid.View' class='docClass'>Ext.grid.View</a></div><h4>Files</h4><div class='dependency'><a href='source/Panel2.html#Ext-grid-Panel' target='_blank'>Panel.js</a></div></pre><div class='doc-contents'><p>Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged\n<code><table></code>, GridPanel makes it easy to fetch, sort and filter large amounts of data.</p>\n\n<p>Grids are composed of two main pieces - a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a> full of data and a set of columns to render.</p>\n\n<h2>Basic GridPanel</h2>\n\n<pre class='inline-example '><code>Ext.create('Ext.data.Store', {\n storeId:'simpsonsStore',\n fields:['name', 'email', 'phone'],\n data:{'items':[\n { 'name': 'Lisa', \"email\":\"lisa@simpsons.com\", \"phone\":\"555-111-1224\" },\n { 'name': 'Bart', \"email\":\"bart@simpsons.com\", \"phone\":\"555-222-1234\" },\n { 'name': 'Homer', \"email\":\"home@simpsons.com\", \"phone\":\"555-222-1244\" },\n { 'name': 'Marge', \"email\":\"marge@simpsons.com\", \"phone\":\"555-222-1254\" }\n ]},\n proxy: {\n type: 'memory',\n reader: {\n type: 'json',\n root: 'items'\n }\n }\n});\n\nExt.create('Ext.grid.Panel', {\n title: 'Simpsons',\n store: Ext.data.StoreManager.lookup('simpsonsStore'),\n columns: [\n { header: 'Name', dataIndex: 'name' },\n { header: 'Email', dataIndex: 'email', flex: 1 },\n { header: 'Phone', dataIndex: 'phone' }\n ],\n height: 200,\n width: 400,\n renderTo: Ext.getBody()\n});\n</code></pre>\n\n<p>The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline.\nIn most apps we would be placing the grid inside another container and wouldn't need to use the\n<a href=\"#!/api/Ext.grid.Panel-cfg-height\" rel=\"Ext.grid.Panel-cfg-height\" class=\"docClass\">height</a>, <a href=\"#!/api/Ext.grid.Panel-cfg-width\" rel=\"Ext.grid.Panel-cfg-width\" class=\"docClass\">width</a> and <a href=\"#!/api/Ext.grid.Panel-cfg-renderTo\" rel=\"Ext.grid.Panel-cfg-renderTo\" class=\"docClass\">renderTo</a> configurations but they are included here to make it easy to get\nup and running.</p>\n\n<p>The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath\nand finally the grid rows under the headers.</p>\n\n<h2>Configuring columns</h2>\n\n<p>By default, each column is sortable and will toggle between ASC and DESC sorting when you click on its header. Each\ncolumn header is also reorderable by default, and each gains a drop-down menu with options to hide and show columns.\nIt's easy to configure each column - here we use the same example as above and just modify the columns config:</p>\n\n<pre><code>columns: [\n {\n header: 'Name',\n dataIndex: 'name',\n sortable: false,\n hideable: false,\n flex: 1\n },\n {\n header: 'Email',\n dataIndex: 'email',\n hidden: true\n },\n {\n header: 'Phone',\n dataIndex: 'phone',\n width: 100\n }\n]\n</code></pre>\n\n<p>We turned off sorting and hiding on the 'Name' column so clicking its header now has no effect. We also made the Email\ncolumn hidden by default (it can be shown again by using the menu on any other column). We also set the Phone column to\na fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns\nhave been accounted for. See the <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column docs</a> for more details.</p>\n\n<h2>Renderers</h2>\n\n<p>As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is\ntied to a particular column and is passed the value that would be rendered into each cell in that column. For example,\nwe could define a renderer function for the email column to turn each email address into a mailto link:</p>\n\n<pre><code>columns: [\n {\n header: 'Email',\n dataIndex: 'email',\n renderer: function(value) {\n return Ext.String.format('<a href=\"mailto:{0}\">{1}</a>', value, value);\n }\n }\n]\n</code></pre>\n\n<p>See the <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">column docs</a> for more information on renderers.</p>\n\n<h2>Selection Models</h2>\n\n<p>Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or\nupdate that data. Grids use a concept called a Selection Model, which is simply a mechanism for selecting some part of\nthe data in the grid. The two main types of Selection Model are RowSelectionModel, where entire rows are selected, and\nCellSelectionModel, where individual cells are selected.</p>\n\n<p>Grids use a Row Selection Model by default, but this is easy to customise like so:</p>\n\n<pre><code>Ext.create('Ext.grid.Panel', {\n selType: 'cellmodel',\n store: ...\n});\n</code></pre>\n\n<p>Specifying the <code>cellmodel</code> changes a couple of things. Firstly, clicking on a cell now\nselects just that cell (using a <a href=\"#!/api/Ext.selection.RowModel\" rel=\"Ext.selection.RowModel\" class=\"docClass\">rowmodel</a> will select the entire row), and secondly the\nkeyboard navigation will walk from cell to cell instead of row to row. Cell-based selection models are usually used in\nconjunction with editing.</p>\n\n<h2>Editing</h2>\n\n<p>Grid has built-in support for in-line editing. There are two chief editing modes - cell editing and row editing. Cell\nediting is easy to add to your existing column setup - here we'll just modify the example above to include an editor\non both the name and the email columns:</p>\n\n<pre><code>Ext.create('Ext.grid.Panel', {\n title: 'Simpsons',\n store: Ext.data.StoreManager.lookup('simpsonsStore'),\n columns: [\n { header: 'Name', dataIndex: 'name', field: 'textfield' },\n { header: 'Email', dataIndex: 'email', flex: 1,\n field: {\n xtype: 'textfield',\n allowBlank: false\n }\n },\n { header: 'Phone', dataIndex: 'phone' }\n ],\n selType: 'cellmodel',\n plugins: [\n Ext.create('Ext.grid.plugin.CellEditing', {\n clicksToEdit: 1\n })\n ],\n height: 200,\n width: 400,\n renderTo: Ext.getBody()\n});\n</code></pre>\n\n<p>This requires a little explanation. We're passing in <a href=\"#!/api/Ext.grid.Panel-cfg-store\" rel=\"Ext.grid.Panel-cfg-store\" class=\"docClass\">store</a> and <a href=\"#!/api/Ext.grid.Panel-cfg-columns\" rel=\"Ext.grid.Panel-cfg-columns\" class=\"docClass\">columns</a> as normal, but\nthis time we've also specified a <a href=\"#!/api/Ext.grid.column.Column-cfg-field\" rel=\"Ext.grid.column.Column-cfg-field\" class=\"docClass\">field</a> on two of our columns. For the Name column\nwe just want a default textfield to edit the value, so we specify 'textfield'. For the Email column we customized the\neditor slightly by passing allowBlank: false, which will provide inline validation.</p>\n\n<p>To support cell editing, we also specified that the grid should use the 'cellmodel' <a href=\"#!/api/Ext.grid.Panel-cfg-selType\" rel=\"Ext.grid.Panel-cfg-selType\" class=\"docClass\">selType</a>, and created an\ninstance of the <a href=\"#!/api/Ext.grid.plugin.CellEditing\" rel=\"Ext.grid.plugin.CellEditing\" class=\"docClass\">CellEditing plugin</a>, which we configured to activate each editor after a\nsingle click.</p>\n\n<h2>Row Editing</h2>\n\n<p>The other type of editing is row-based editing, using the RowEditor component. This enables you to edit an entire row\nat a time, rather than editing cell by cell. Row Editing works in exactly the same way as cell editing, all we need to\ndo is change the plugin type to <a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">Ext.grid.plugin.RowEditing</a>, and set the selType to 'rowmodel':</p>\n\n<pre><code>Ext.create('Ext.grid.Panel', {\n title: 'Simpsons',\n store: Ext.data.StoreManager.lookup('simpsonsStore'),\n columns: [\n { header: 'Name', dataIndex: 'name', field: 'textfield' },\n { header: 'Email', dataIndex: 'email', flex:1,\n field: {\n xtype: 'textfield',\n allowBlank: false\n }\n },\n { header: 'Phone', dataIndex: 'phone' }\n ],\n selType: 'rowmodel',\n plugins: [\n Ext.create('Ext.grid.plugin.RowEditing', {\n clicksToEdit: 1\n })\n ],\n height: 200,\n width: 400,\n renderTo: Ext.getBody()\n});\n</code></pre>\n\n<p>Again we passed some configuration to our <a href=\"#!/api/Ext.grid.plugin.RowEditing\" rel=\"Ext.grid.plugin.RowEditing\" class=\"docClass\">Ext.grid.plugin.RowEditing</a> plugin, and now when we click each row a row\neditor will appear and enable us to edit each of the columns we have specified an editor for.</p>\n\n<h2>Sorting & Filtering</h2>\n\n<p>Every grid is attached to a <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>, which provides multi-sort and filtering capabilities. It's\neasy to set up a grid to be sorted from the start:</p>\n\n<pre><code>var myGrid = Ext.create('Ext.grid.Panel', {\n store: {\n fields: ['name', 'email', 'phone'],\n sorters: ['name', 'phone']\n },\n columns: [\n { text: 'Name', dataIndex: 'name' },\n { text: 'Email', dataIndex: 'email' }\n ]\n});\n</code></pre>\n\n<p>Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on\nmore than one field at run time it's easy to do so by adding new sorters to the store:</p>\n\n<pre><code>myGrid.store.sort([\n { property: 'name', direction: 'ASC' },\n { property: 'email', direction: 'DESC' }\n]);\n</code></pre>\n\n<p>See <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Ext.data.Store</a> for examples of filtering.</p>\n\n<h2>Grouping</h2>\n\n<p>Grid supports the grouping of rows by any field. For example if we had a set of employee records, we might want to\ngroup by the department that each employee works in. Here's how we might set that up:</p>\n\n<pre class='inline-example '><code>var store = Ext.create('Ext.data.Store', {\n storeId:'employeeStore',\n fields:['name', 'senority', 'department'],\n groupField: 'department',\n data: {'employees':[\n { \"name\": \"Michael Scott\", \"senority\": 7, \"department\": \"Manangement\" },\n { \"name\": \"Dwight Schrute\", \"senority\": 2, \"department\": \"Sales\" },\n { \"name\": \"Jim Halpert\", \"senority\": 3, \"department\": \"Sales\" },\n { \"name\": \"Kevin Malone\", \"senority\": 4, \"department\": \"Accounting\" },\n { \"name\": \"Angela Martin\", \"senority\": 5, \"department\": \"Accounting\" }\n ]},\n proxy: {\n type: 'memory',\n reader: {\n type: 'json',\n root: 'employees'\n }\n }\n});\n\nExt.create('Ext.grid.Panel', {\n title: 'Employees',\n store: Ext.data.StoreManager.lookup('employeeStore'),\n columns: [\n { header: 'Name', dataIndex: 'name' },\n { header: 'Senority', dataIndex: 'senority' }\n ],\n features: [{ftype:'grouping'}],\n width: 200,\n height: 275,\n renderTo: Ext.getBody()\n});\n</code></pre>\n\n<h2>Infinite Scrolling</h2>\n\n<p>Grid supports infinite scrolling as an alternative to using a paging toolbar. Your users can scroll through thousands\nof records without the performance penalties of renderering all the records on screen at once. The grid should be bound\nto a store with a pageSize specified.</p>\n\n<pre><code>var grid = Ext.create('Ext.grid.Panel', {\n // Use a PagingGridScroller (this is interchangeable with a PagingToolbar)\n verticalScrollerType: 'paginggridscroller',\n // do not reset the scrollbar when the view refreshs\n invalidateScrollerOnRefresh: false,\n // infinite scrolling does not support selection\n disableSelection: true,\n // ...\n});\n</code></pre>\n\n<h2>Paging</h2>\n\n<p>Grid supports paging through large sets of data via a PagingToolbar or PagingGridScroller (see the Infinite Scrolling section above).\nTo leverage paging via a toolbar or scroller, you need to set a pageSize configuration on the Store.</p>\n\n<pre class='inline-example '><code>var itemsPerPage = 2; // set the number of items you want per page\n\nvar store = Ext.create('Ext.data.Store', {\n id:'simpsonsStore',\n autoLoad: false,\n fields:['name', 'email', 'phone'],\n pageSize: itemsPerPage, // items per page\n proxy: {\n type: 'ajax',\n url: 'pagingstore.js', // url that will load data with respect to start and limit params\n reader: {\n type: 'json',\n root: 'items',\n totalProperty: 'total'\n }\n }\n});\n\n// specify segment of data you want to load using params\nstore.load({\n params:{\n start:0,\n limit: itemsPerPage\n }\n});\n\nExt.create('Ext.grid.Panel', {\n title: 'Simpsons',\n store: store,\n columns: [\n {header: 'Name', dataIndex: 'name'},\n {header: 'Email', dataIndex: 'email', flex:1},\n {header: 'Phone', dataIndex: 'phone'}\n ],\n width: 400,\n height: 125,\n dockedItems: [{\n xtype: 'pagingtoolbar',\n store: store, // same store GridPanel is using\n dock: 'bottom',\n displayInfo: true\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 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-activeItem' target='_blank' class='viewSource'>view source</a></div><a href='#!/api/Ext.container.AbstractContainer-cfg-activeItem' class='name 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'>A string component id or the numeric index of the component that should be initially activated within the\ncontainer's...</div><div class='long'><p>A string component id or the numeric index of the component that should be initially activated within the\ncontainer's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first\nitem in the container's collection). activeItem only applies to layout styles that can display\nitems one at a time (like <a href=\"#!/api/Ext.layout.container.Card\" rel=\"Ext.layout.container.Card\" class=\"docClass\">Ext.layout.container.Card</a> and <a href=\"#!/api/Ext.layout.container.Fit\" rel=\"Ext.layout.container.Fit\" class=\"docClass\">Ext.layout.container.Fit</a>).</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…
Large files files are truncated, but you can click here to view the full file