ext.tabpanel.html.svn-base

来自「PHP 知识管理系统（基于树结构的知识管理系统）, 英文原版的PHP源码。」· SVN-BASE 代码 · 共 849 行 · 第 1/5 页

        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.TabPanel-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.TabPanel-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.TabPanel-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                            <a class="inner-link" href="#Ext.TabPanel-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
                        <a class="bookmark" href="../docs/?class=Ext.TabPanel"><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"/><a ext:cls="Ext.Panel" ext:member="" href="output/Ext.Panel.html">Panel</a>
          <img src="resources/elbow-end.gif"/>TabPanel</pre></div>
                <h1>Class Ext.TabPanel</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">TabPanel.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">TabPanel</td></tr>
                                    <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.Panel" ext:member="" href="output/Ext.Panel.html">Panel</a></td></tr>
                    </table>
        <div class="description">
            <p>A basic tab container. Tab panels can be used exactly like a standard <a ext:cls="Ext.Panel" href="output/Ext.Panel.html">Ext.Panel</a> for layout
purposes, but also have special support for containing child Panels that get automatically converted into tabs.</p>
<p>There is no actual tab class &mdash; each tab is simply an <a ext:cls="Ext.Panel" href="output/Ext.Panel.html">Ext.Panel</a>.  However, when rendered in a
TabPanel, each child Panel can fire additional events that only exist for tabs and are not available to other
Panels. These are:</p>
<ul>
<li><b>activate</b>: Fires when this Panel becomes the active tab.
<div class="mdetail-params">
<strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong>
<ul><li><code>tab</code> : Panel<div class="sub-desc">The tab that was activated</div></li></ul>
</div></li>
<li><b>deactivate</b>: Fires when this Panel that was the active tab becomes deactivated.
<div class="mdetail-params">
<strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong>
<ul><li><code>tab</code> : Panel<div class="sub-desc">The tab that was deactivated</div></li></ul>
</div></li>
</ul>
<p>There are several methods available for creating TabPanels. The output of the following examples should be
exactly the same. The tabs can be created and rendered completely in code, as in this example:</p>
<pre><code>
var tabs = new Ext.TabPanel({
    renderTo: Ext.getBody(),
    activeTab: 0,
    items: [{
        title: 'Tab 1',
        html: 'A simple tab'
    },{
        title: 'Tab 2',
        html: 'Another one'
    }]
});</pre></code>
<p>TabPanels can also be rendered from markup in a couple of ways.  See the <a ext:cls="Ext.TabPanel" ext:member="autoTabs" href="output/Ext.TabPanel.html#autoTabs">autoTabs</a> example for
rendering entirely from markup that is already structured correctly as a TabPanel (a container div with
one or more nested tab divs with class 'x-tab'). You can also render from markup that is not strictly
structured by simply specifying by id which elements should be the container and the tabs. Using this method,
tab content can be pulled from different elements within the page by id regardless of page structure.  Note
that the tab divs in this example contain the class 'x-hide-display' so that they can be rendered deferred
without displaying outside the tabs. You could alternately set <a ext:cls="Ext.TabPanel" ext:member="deferredRender" href="output/Ext.TabPanel.html#deferredRender">deferredRender</a> to false to render all
content tabs on page load. For example:
<pre><code>
var tabs = new Ext.TabPanel({
    renderTo: 'my-tabs',
    activeTab: 0,
    items:[
        {contentEl:'tab1', title:'Tab 1'},
        {contentEl:'tab2', title:'Tab 2'}
    ]
});

// Note that the tabs do not have to be nested within the container (although they can be)
&lt;div id="my-tabs">&lt;/div>
&lt;div id="tab1" class="x-hide-display">A simple tab&lt;/div>
&lt;div id="tab2" class="x-hide-display">Another one&lt;/div></pre></code>        </div>
        
        <div class="hr"></div>
                <a id="Ext.TabPanel-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">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.TabPanel-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 alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.TabPanel-activeTab"></a>
            <b>activeTab</b> : String/Number            <div class="mdesc">
                            A string id or the numeric index of the tab that should be initially activated on render (defaults to none).                        </div>
        </td>
        <td class="msource">TabPanel</td>
    </tr>
        <tr class="config-row inherited">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.TabPanel-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 inherited alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.TabPanel-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"><a ext:cls="Ext.Panel" ext:member="#animCollapse" href="output/Ext.Panel.html#animCollapse">Panel</a></td>
    </tr>
        <tr class="config-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.TabPanel-animScroll"></a>
            <b>animScroll</b> : Boolean            <div class="mdesc">
                        <div class="short">True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults to true). Only applies when enab...</div>
            <div class="long">
                True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults to true). Only applies when <a ext:cls="Ext.TabPanel" ext:member="enableTabScroll" href="output/Ext.TabPanel.html#enableTabScroll">enableTabScroll</a> = true.            </div>
                        </div>
        </td>
        <td class="msource">TabPanel</td>
    </tr>
        <tr class="config-row inherited alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.TabPanel-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 structural markup for this component. When applyTo is used, constituent parts of the component can also be specified by id or CSS class name within the main element, and the component being created may attempt to create its subcomponents from that markup if applicable. Using this config, a call to render() is not required. If applyTo is specified, any value passed for <a ext:cls="Ext.Component" ext:member="renderTo" href="output/Ext.Component.html#renderTo">renderTo</a> will be ignored and the target element's parent node will automatically be used as the component's container.            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Component" ext:member="#applyTo" href="output/Ext.Component.html#applyTo">Component</a></td>
    </tr>
        <tr class="config-row inherited expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.TabPanel-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">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.TabPanel-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">