ext.container.html.svn-base

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

        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.Container-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.Container-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.Container-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                            <a class="inner-link" href="#Ext.Container-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
                        <a class="bookmark" href="../docs/?class=Ext.Container"><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"/>Container</pre></div>
                <h1>Class Ext.Container</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">Container.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">Container</td></tr>
                        <tr><td class="label">Subclasses:</td><td class="hd-info"><a ext:cls="Ext.Panel" href="output/Ext.Panel.html">Panel</a>, <a ext:cls="Ext.Viewport" href="output/Ext.Viewport.html">Viewport</a></td></tr>
                                    <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.BoxComponent" ext:member="" href="output/Ext.BoxComponent.html">BoxComponent</a></td></tr>
                    </table>
        <div class="description">
            <p>Base class for any <a ext:cls="Ext.BoxComponent" href="output/Ext.BoxComponent.html">Ext.BoxComponent</a> that can contain other components.  Containers handle the basic
behavior of containing items, namely adding, inserting and removing them.  The specific layout logic required
to visually render contained items is delegated to any one of the different <a ext:cls="Ext.Container" ext:member="layout" href="output/Ext.Container.html#layout">layout</a> classes available.
This class is intended to be extended and should generally not need to be created directly via the new keyword.</p>
<p>When either specifying child <a ext:cls="Ext.Container" ext:member="items" href="output/Ext.Container.html#items">items</a> of a Container, or dynamically adding components to a Container,
remember to consider how you wish the Container to arrange those child elements, and whether those child elements
need to be sized using one of Ext's built-in layout schemes.</p>
<p>By default, Containers use the <a ext:cls="Ext.layout.ContainerLayout" href="output/Ext.layout.ContainerLayout.html">ContainerLayout</a> scheme. This simply renders
child components, appending them one after the other inside the Container, and does not apply any sizing at all.
This is a common source of confusion when widgets like GridPanels or TreePanels are added to Containers for
which no layout has been specified. If a Container is left to use the ContainerLayout scheme, none of its child
components will be resized, or changed in any way when the Container is resized.</p>
<p>A very common example of this is where a developer will attempt to add a GridPanel to a TabPanel by wrapping
the GridPanel <i>inside</i> a wrapping Panel and add that wrapping Panel to the TabPanel. This misses the point that
Ext's inheritance means that a GridPanel <b>is</b> a Component which can be added unadorned into a Container. If
that wrapping Panel has no layout configuration, then the GridPanel will not be sized as expected.<p>
<p>Below is an example of adding a newly created GridPanel to a TabPanel. This requires prior knowledge of how
to create GridPanels. See <a ext:cls="Ext.grid.GridPanel" href="output/Ext.grid.GridPanel.html">Ext.grid.GridPanel</a>, <a ext:cls="Ext.data.Store" href="output/Ext.data.Store.html">Ext.data.Store</a> and <a ext:cls="Ext.data.JsonReader" href="output/Ext.data.JsonReader.html">Ext.data.JsonReader</a> as
well as the grid examples in the Ext installation's <tt>examples/grid</tt> directory.</p><pre><code><i>//  Create the GridPanel.</i>
myGrid = <b>new</b> Ext.grid.GridPanel({
    myStore,
    myColumnModel,
    title: <em>'Results'</em>,
});

myTabPanel.add(myGrid);
myTabPanel.setActiveItem(myGrid);</code></pre>        </div>
        
        <div class="hr"></div>
                <a id="Ext.Container-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 expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Container-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">Container</td>
    </tr>
        <tr class="config-row inherited alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Container-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 expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Container-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 alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Container-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">Container</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.Container-autoEl"></a>
            <b>autoEl</b> : String/Object            <div class="mdesc">
                        <div class="short">A tag name or DomHelper spec to create an element with. This is intended to create shorthand utility components inlin...</div>
            <div class="long">
                A tag name or DomHelper spec to create an element with. This is intended to create shorthand utility components inline via JSON. It should not be used for higher level components which already create their own elements. Example usage: <pre><code>{xtype:<em>'box'</em>, autoEl: <em>'div'</em>, cls:<em>'my-class'</em>}
{xtype:<em>'box'</em>, autoEl: {tag:<em>'blockquote'</em>, html:<em>'autoEl is cool!'</em>}} // <b>with</b> DomHelper</code></pre>            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Component" ext:member="#autoEl" href="output/Ext.Component.html#autoEl">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.Container-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 inherited expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Container-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">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Container-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 expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Container-bufferResize"></a>
            <b>bufferResize</b> : Boolean/Number            <div class="mdesc">
                        <div class="short">When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...</div>
            <div class="long">
                When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers with a large quantity of sub-components for which frequent layout calls would be expensive.            </div>
                        </div>
        </td>
        <td class="msource">Container</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.Container-cls"></a>
            <b>cls</b> : String            <div class="mdesc">
                        <div class="short">An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for a...</div>
            <div class="long">
                An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for adding customized styles to the component or any of its children using standard CSS rules.            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Component" ext:member="#cls" href="output/Ext.Component.html#cls">Component</a></td>
    </tr>
        <tr class="config-row inherited expandable">