ext.viewport.html.svn-base

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

        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.Viewport-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.Viewport-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.Viewport-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                            <a class="inner-link" href="#Ext.Viewport-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
                        <a class="bookmark" href="../docs/?class=Ext.Viewport"><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"/>Viewport</pre></div>
                <h1>Class Ext.Viewport</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">Viewport.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">Viewport</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">
            A specialized container representing the viewable application area (the browser viewport).
<p> The Viewport renders itself to the document body, and automatically sizes itself to the size of
the browser viewport and manages window resizing. There may only be one Viewport created
in a page. Inner layouts are available by virtue of the fact that all <a ext:cls="Ext.Panel" href="output/Ext.Panel.html">Panel</a>s
added to the Viewport, either through its <a ext:cls="Ext.Viewport" ext:member="items" href="output/Ext.Viewport.html#items">items</a>, or through the items, or the <a ext:cls="Ext.Viewport" ext:member="add" href="output/Ext.Viewport.html#add">add</a>
method of any of its child Panels may themselves have a layout.</p>
<p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
for scrolling if needed using the <a ext:cls="Ext.Viewport" ext:member="autoScroll" href="output/Ext.Viewport.html#autoScroll">autoScroll</a> config.</p>
Example showing a classic application border layout :<pre><code>new Ext.Viewport({
    layout: <em>'border'</em>,
    defaults: {
        activeItem: 0
    },
    items: [{
        region: <em>'north'</em>,
        html: <em>'&lt;h1 class="x-panel-header">Page Title&lt;/h1>'</em>,
        autoHeight: true,
        border: false,
        margins: <em>'0 0 5 0'</em>
    }, {
        region: <em>'west'</em>,
        collapsible: true,
        title: <em>'Navigation'</em>,
        xtype: <em>'treepanel'</em>,
        width: 200,
        autoScroll: true,
        split: true,
        loader: <b>new</b> Ext.tree.TreeLoader(),
        root: <b>new</b> Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [{
                text: <em>'Menu Option 1'</em>,
                leaf: true
            }, {
                text: <em>'Menu Option 2'</em>,
                leaf: true
            }, {
                text: <em>'Menu Option 3'</em>,
                leaf: true
            }]
        }),
        rootVisible: false,
        listeners: {
            click: <b>function</b>(n) {
                Ext.Msg.alert(<em>'Navigation Tree Click'</em>, <em>'You clicked: "'</em> + n.attributes.text + <em>'"'</em>);
            }
        }
    }, {
        region: <em>'center'</em>,
        xtype: <em>'tabpanel'</em>,
        items: {
            title: <em>'Default Tab'</em>,
            html: <em>'The first tab\'</em>s content. Others may be added dynamically'
        }
    }, {
        region: <em>'south'</em>,
        title: <em>'Information'</em>,
        collapsible: true,
        html: <em>'Information goes here'</em>,
        split: true,
        height: 100,
        minHeight: 100
    }]
});</code></pre>        </div>
        
        <div class="hr"></div>
                <a id="Ext.Viewport-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.Viewport-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 expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Viewport-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 expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Viewport-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.Viewport-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 expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Viewport-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"><a ext:cls="Ext.Container" ext:member="#bufferResize" href="output/Ext.Container.html#bufferResize">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.Viewport-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">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Viewport-ctCls"></a>
            <b>ctCls</b> : String            <div class="mdesc">
                        <div class="short">An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for...</div>
            <div class="long">
                An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Component" ext:member="#ctCls" href="output/Ext.Component.html#ctCls">Component</a></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.Viewport-defaultType"></a>
            <b>defaultType</b> : String            <div class="mdesc">
                            The default type of container represented by this object as registered in <a ext:cls="Ext.ComponentMgr" href="output/Ext.ComponentMgr.html">Ext.ComponentMgr</a> (defaults to 'panel').                        </div>