ext.domhelper.html.svn-base

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

        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.DomHelper-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.DomHelper-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.DomHelper-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                        <a class="bookmark" href="../docs/?class=Ext.DomHelper"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
        </div>
                <h1>Class Ext.DomHelper</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">DomHelper.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">DomHelper</td></tr>
                                    <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
                    </table>
        <div class="description">
            Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.<br>
This is an example, where an unordered list with 5 children items is appended to an existing element with id 'my-div':<br>
 <pre><code>var dh = Ext.DomHelper;
<b>var</b> list = dh.append(<em>'my-div'</em>, {
    id: <em>'my-ul'</em>, tag: <em>'ul'</em>, cls: <em>'my-list'</em>, children: [
        {tag: <em>'li'</em>, id: <em>'item0'</em>, html: <em>'List Item 0'</em>},
        {tag: <em>'li'</em>, id: <em>'item1'</em>, html: <em>'List Item 1'</em>},
        {tag: <em>'li'</em>, id: <em>'item2'</em>, html: <em>'List Item 2'</em>},
        {tag: <em>'li'</em>, id: <em>'item3'</em>, html: <em>'List Item 3'</em>},
        {tag: <em>'li'</em>, id: <em>'item4'</em>, html: <em>'List Item 4'</em>}
    ]
});</code></pre>
<p>Element creation specification parameters in this class may also be passed as an Array of
specification objects. This can be used to insert multiple sibling nodes into an existing
container very efficiently. For example, to add more list items to the example above:<pre><code>dh.append(<em>'my-ul'</em>, [
    {tag: <em>'li'</em>, id: <em>'item5'</em>, html: <em>'List Item 5'</em>},
    {tag: <em>'li'</em>, id: <em>'item6'</em>, html: <em>'List Item 6'</em>} ]);</code></pre></p>
<p>Element creation specification parameters may also be strings. If <a ext:cls="useDom" href="output/useDom.html">useDom</a> is false, then the string is used
as innerHTML. If <a ext:cls="useDom" href="output/useDom.html">useDom</a> is true, a string specification results in the creation of a text node.</p>
For more information and examples, see <a href="http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">the original blog post</a>.<br><br><i>This class is a singleton and cannot be created directly.</i>        </div>
        
        <div class="hr"></div>
                <a id="Ext.DomHelper-props"></a>
        <h2>Public Properties</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Property</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="property-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DomHelper-useDom"></a>
            <b>useDom</b> : Boolean            <div class="mdesc">
                            True to force the use of DOM instead of html fragments                        </div>
        </td>
        <td class="msource">DomHelper</td>
    </tr>
            </table>
                <a id="Ext.DomHelper-methods"></a>
        <h2>Public Methods</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Method</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="method-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DomHelper-append"></a>
            <b>append</b>(&nbsp;<code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span>&nbsp;) : HTMLElement/Ext.Element            <div class="mdesc">
                        <div class="short">Creates new DOM element(s) and appends them to el.</div>
            <div class="long">
                Creates new DOM element(s) and appends them to el.    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>o</code> : Object/String<div class="sub-desc">The DOM object spec (and children) or raw HTML blob</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element</div></li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>
        </ul>
    </div>
                </div>
                        </div>
        </td>
        <td class="msource">DomHelper</td>
    </tr>
        <tr class="method-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DomHelper-applyStyles"></a>
            <b>applyStyles</b>(&nbsp;<code>String/HTMLElement el</code>, <code>String/Object/Function styles</code>&nbsp;) : void            <div class="mdesc">
                        <div class="short">Applies a style specification to an element.</div>
            <div class="long">
                Applies a style specification to an element.    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li><code>el</code> : String/HTMLElement<div class="sub-desc">The element to apply styles to</div></li><li><code>styles</code> : String/Object/Function<div class="sub-desc">A style specification string eg "width:100px", or object in the form {width:"100px"}, or
a function which returns such a specification.</div></li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code>void</code></li>
        </ul>
    </div>
                </div>
                        </div>
        </td>
        <td class="msource">DomHelper</td>
    </tr>
        <tr class="method-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DomHelper-createTemplate"></a>
            <b>createTemplate</b>(&nbsp;<code>Object o</code>&nbsp;) : Ext.Template            <div class="mdesc">
                        <div class="short">Creates a new Ext.Template from the DOM object spec.</div>
            <div class="long">
                Creates a new Ext.Template from the DOM object spec.    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li><code>o</code> : Object<div class="sub-desc">The DOM object spec (and children)</div></li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code>Ext.Template</code><div class="sub-desc">The new template</div></li>
        </ul>
    </div>
                </div>
                        </div>
        </td>
        <td class="msource">DomHelper</td>
    </tr>
        <tr class="method-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>