📄 ext.panel.html.svn-base
字号:
<div class="body-wrap"> <div class="top-tools"> <a class="inner-link" href="#Ext.Panel-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Panel-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Panel-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Panel-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Panel"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div> <div class="inheritance res-block"><pre class="res-block-inner"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Component" ext:member="" href="output/Ext.Component.html">Component</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.BoxComponent" ext:member="" href="output/Ext.BoxComponent.html">BoxComponent</a> <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Container" ext:member="" href="output/Ext.Container.html">Container</a> <img src="resources/elbow-end.gif"/>Panel</pre></div> <h1>Class Ext.Panel</h1> <table cellspacing="0"> <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr> <tr><td class="label">Defined In:</td><td class="hd-info">Panel.js</td></tr> <tr><td class="label">Class:</td><td class="hd-info">Panel</td></tr> <tr><td class="label">Subclasses:</td><td class="hd-info"><a ext:cls="Ext.TabPanel" href="output/Ext.TabPanel.html">TabPanel</a>, <a ext:cls="Ext.Tip" href="output/Ext.Tip.html">Tip</a>, <a ext:cls="Ext.Window" href="output/Ext.Window.html">Window</a>, <a ext:cls="Ext.form.FieldSet" href="output/Ext.form.FieldSet.html">FieldSet</a>, <a ext:cls="Ext.form.FormPanel" href="output/Ext.form.FormPanel.html">FormPanel</a>, <a ext:cls="Ext.grid.GridPanel" href="output/Ext.grid.GridPanel.html">GridPanel</a>, <a ext:cls="Ext.tree.TreePanel" href="output/Ext.tree.TreePanel.html">TreePanel</a></td></tr> <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.Container" ext:member="" href="output/Ext.Container.html">Container</a></td></tr> </table> <div class="description"> Panel is a container that has specific functionality and structural components that make it the perfect buildingblock for application-oriented user interfaces. The Panel contains bottom and top toolbars, along with separateheader, footer and body sections. It also provides built-in expandable and collapsible behavior, along with avariety of prebuilt tool buttons that can be wired up to provide other customized behavior. Panels can be easilydropped into any Container or layout, and the layout and rendering pipeline is completely managed by the framework. </div> <div class="hr"></div> <a id="Ext.Panel-configs"></a> <h2>Config Options</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2">Config Options</th> <th class="msource-header">Defined By</th> </tr> <tr class="config-row inherited expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-activeItem"></a>
<b>activeItem</b> : String/Number <div class="mdesc">
<div class="short">A string component id or the numeric index of the component that should be initially activated within the container's...</div>
<div class="long">
A string component id or the numeric index of the component that should be initially activated within the container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first item in the container's collection). activeItem only applies to layout styles that can display items one at a time (like <a ext:cls="Ext.layout.Accordion" href="output/Ext.layout.Accordion.html">Ext.layout.Accordion</a>, <a ext:cls="Ext.layout.CardLayout" href="output/Ext.layout.CardLayout.html">Ext.layout.CardLayout</a> and <a ext:cls="Ext.layout.FitLayout" href="output/Ext.layout.FitLayout.html">Ext.layout.FitLayout</a>). Related to <a ext:cls="Ext.layout.ContainerLayout" ext:member="activeItem" href="output/Ext.layout.ContainerLayout.html#activeItem">Ext.layout.ContainerLayout.activeItem</a>. </div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.Container" ext:member="#activeItem" href="output/Ext.Container.html#activeItem">Container</a></td>
</tr>
<tr class="config-row inherited alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-allowDomMove"></a>
<b>allowDomMove</b> : Boolean <div class="mdesc">
Whether the component can move the Dom node when rendering (defaults to true). </div>
</td>
<td class="msource"><a ext:cls="Ext.Component" ext:member="#allowDomMove" href="output/Ext.Component.html#allowDomMove">Component</a></td>
</tr>
<tr class="config-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-animCollapse"></a>
<b>animCollapse</b> : Boolean <div class="mdesc">
<div class="short">True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....</div>
<div class="long">
True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the <a ext:cls="Ext.Fx" href="output/Ext.Fx.html">Ext.Fx</a> class is available, otherwise false). </div>
</div>
</td>
<td class="msource">Panel</td>
</tr>
<tr class="config-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-applyTo"></a>
<b>applyTo</b> : Mixed <div class="mdesc">
<div class="short">The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...</div>
<div class="long">
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document that specifies some panel-specific structural markup. When applyTo is used, constituent parts of the panel can be specified by CSS class name within the main element, and the panel will automatically create those components from that markup. Any required components not specified in the markup will be autogenerated if necessary. The following class names are supported (baseCls will be replaced by <a ext:cls="Ext.Panel" ext:member="baseCls" href="output/Ext.Panel.html#baseCls">baseCls</a>): <ul><li>baseCls + '-header'</li> <li>baseCls + '-header-text'</li> <li>baseCls + '-bwrap'</li> <li>baseCls + '-tbar'</li> <li>baseCls + '-body'</li> <li>baseCls + '-bbar'</li> <li>baseCls + '-footer'</li></ul> Using this config, a call to render() is not required. If applyTo is specified, any value passed for <a ext:cls="Ext.Panel" ext:member="renderTo" href="output/Ext.Panel.html#renderTo">renderTo</a> will be ignored and the target element's parent node will automatically be used as the panel's container. </div>
</div>
</td>
<td class="msource">Panel</td>
</tr>
<tr class="config-row inherited expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-autoDestroy"></a>
<b>autoDestroy</b> : Boolean <div class="mdesc">
<div class="short">If true the container will automatically destroy any contained component that is removed from it, else destruction mu...</div>
<div class="long">
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true). </div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.Container" ext:member="#autoDestroy" href="output/Ext.Container.html#autoDestroy">Container</a></td>
</tr>
<tr class="config-row inherited alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-autoHeight"></a>
<b>autoHeight</b> : Boolean <div class="mdesc">
<div class="short">True to use height:'auto', false to use fixed height. Note: although many components inherit this config option, not ...</div>
<div class="long">
True to use height:'auto', false to use fixed height. Note: although many components inherit this config option, not all will function as expected with a height of 'auto'. (defaults to false). </div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.BoxComponent" ext:member="#autoHeight" href="output/Ext.BoxComponent.html#autoHeight">BoxComponent</a></td>
</tr>
<tr class="config-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-autoLoad"></a>
<b>autoLoad</b> : Object/String/Function <div class="mdesc">
<div class="short">A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...</div>
<div class="long">
A valid url spec according to the Updater <a ext:cls="Ext.Updater" ext:member="update" href="output/Ext.Updater.html#update">Ext.Updater.update</a> method. If autoLoad is not null, the panel will attempt to load its contents immediately upon render.<p> The URL will become the default URL for this panel's <a ext:cls="Ext.Panel" ext:member="body" href="output/Ext.Panel.html#body">body</a> element, so it may be <a ext:cls="Ext.Element" ext:member="refresh" href="output/Ext.Element.html#refresh">refresh</a>ed at any time.</p> </div>
</div>
</td>
<td class="msource">Panel</td>
</tr>
<tr class="config-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-autoScroll"></a>
<b>autoScroll</b> : Boolean <div class="mdesc">
<div class="short">True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to c...</div>
<div class="long">
True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false). </div>
</div>
</td>
<td class="msource">Panel</td>
</tr>
<tr class="config-row inherited expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-autoShow"></a>
<b>autoShow</b> : Boolean <div class="mdesc">
<div class="short">True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...</div>
<div class="long">
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render (defaults to false). </div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.Component" ext:member="#autoShow" href="output/Ext.Component.html#autoShow">Component</a></td>
</tr>
<tr class="config-row inherited alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-autoWidth"></a>
<b>autoWidth</b> : Boolean <div class="mdesc">
<div class="short">True to use width:'auto', false to use fixed width. Note: although many components inherit this config option, not al...</div>
<div class="long">
True to use width:'auto', false to use fixed width. Note: although many components inherit this config option, not all will function as expected with a width of 'auto'. (defaults to false). </div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.BoxComponent" ext:member="#autoWidth" href="output/Ext.BoxComponent.html#autoWidth">BoxComponent</a></td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Panel-baseCls"></a>
<b>baseCls</b> : String <div class="mdesc">
The base CSS class to apply to this panel's element (defaults to 'x-panel'). </div>
</td>
<td class="msource">Panel</td>
</tr>
<tr class="config-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -