ext.dataview.html.svn-base

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

        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.DataView-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.DataView-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.DataView-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                            <a class="inner-link" href="#Ext.DataView-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
                        <a class="bookmark" href="../docs/?class=Ext.DataView"><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"/>DataView</pre></div>
                <h1>Class Ext.DataView</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">DataView.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">DataView</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">
            A mechanism for displaying data using custom layout templates and formatting. DataView uses an <a ext:cls="Ext.XTemplate" href="output/Ext.XTemplate.html">Ext.XTemplate</a>
as its internal templating mechanism, and is bound to an <a ext:cls="Ext.data.Store" href="output/Ext.data.Store.html">Ext.data.Store</a>
so that as the data in the store changes the view is automatically updated to reflect the changes.  The view also
provides built-in behavior for many common events that can occur for its contained items including click, doubleclick,
mouseover, mouseout, etc. as well as a built-in selection model. <b>In order to use these features, an <a ext:cls="Ext.DataView" ext:member="itemSelector" href="output/Ext.DataView.html#itemSelector">itemSelector</a>
config must be provided for the DataView to determine what nodes it will be working with.</b>
<p>The example below binds a DataView to a <a ext:cls="Ext.data.Store" href="output/Ext.data.Store.html">Ext.data.Store</a> and renders it into an <a ext:cls="Ext.Panel" href="output/Ext.Panel.html">Ext.Panel</a>.</p>
<pre><code>var store = <b>new</b> Ext.data.JsonStore({
    url: <em>'get-images.php'</em>,
    root: <em>'images'</em>,
    fields: [
        <em>'name'</em>, <em>'url'</em>,
        {name:<em>'size'</em>, type: <em>'float'</em>},
        {name:<em>'lastmod'</em>, type:<em>'date'</em>, dateFormat:<em>'timestamp'</em>}
    ]
});
store.load();

<b>var</b> tpl = <b>new</b> Ext.XTemplate(
    <em>'&lt;tpl <b>for</b>="."&gt;'</em>,
        <em>'&lt;div class="thumb-wrap" id="{name}"&gt;'</em>,
        <em>'&lt;div class="thumb"&gt;&lt;img src="{url}" title="{name}"&gt;&lt;/div&gt;'</em>,
        <em>'&lt;span class="x-editable"&gt;{shortName}&lt;/span&gt;&lt;/div&gt;'</em>,
    <em>'&lt;/tpl&gt;'</em>,
    <em>'&lt;div class="x-clear"&gt;&lt;/div&gt;'</em>
);

<b>var</b> panel = <b>new</b> Ext.Panel({
    id:<em>'images-view'</em>,
    frame:true,
    width:535,
    autoHeight:true,
    collapsible:true,
    layout:<em>'fit'</em>,
    title:<em>'Simple DataView'</em>,

    items: <b>new</b> Ext.DataView({
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect: true,
        overClass:<em>'x-view-over'</em>,
        itemSelector:<em>'div.thumb-wrap'</em>,
        emptyText: <em>'No images to display'</em>
    })
});
panel.render(document.body);</code></pre>        </div>
        
        <div class="hr"></div>
                <a id="Ext.DataView-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">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DataView-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.DataView-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.DataView-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.DataView-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.DataView-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.DataView-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 inherited expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DataView-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 alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DataView-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">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DataView-deferEmptyText"></a>
            <b>deferEmptyText</b> : Boolean            <div class="mdesc">
                            True to defer emptyText being applied until the store's first load                        </div>
        </td>
        <td class="msource">DataView</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.DataView-disabledClass"></a>
            <b>disabledClass</b> : String            <div class="mdesc">
                            CSS class added to the component when it is disabled (defaults to "x-item-disabled").                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Component" ext:member="#disabledClass" href="output/Ext.Component.html#disabledClass">Component</a></td>
    </tr>
        <tr class="config-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.DataView-emptyText"></a>
            <b>emptyText</b> : String            <div class="mdesc">
                            The text to display in the view when there is no data to display (defaults to '').                        </div>
        </td>
        <td class="msource">DataView</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.DataView-height"></a>
            <b>height</b> : Number            <div class="mdesc">