ext.dataview.html

Ext中文API,学习ext的同志只要你学会ext里的一种控件后其实其他的就大同小异了

<!--
Mock
<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>
-->
<style type="text/css">
    body {
        overflow: scroll;
    }
    /**
	 .mdesc .long {
        display: block;
    }
     */
</style>
<!-- End Mock-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="body-wrap">
    <div class="top-tools">
        <a class="inner-link" href="#Ext.DataView-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.DataView-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.DataView-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.DataView-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.DataView"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a>
    </div><h1>Class Ext.DataView</h1>
    <table cellspacing="0">
        <!--
        <tr>
        <td class="label">
        Package:
        </td>
        <td class="hd-info">
        </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">
                Ext.DataView
            </td>
        </tr>
        <tr>
            <td class="label">
                Extends:
            </td>
            <td class="hd-info">
                Ext.BoxComponent
            </td>
        </tr>
    </table>
    <div class="description">
        能够为自己设计模板和特定格式而提供的一种数据显示机制。
  DataView采用<a href="###" onClick="alert('Ext.XTemplate');">Ext.XTemplate</a>为其模板处理的机制，并依靠<a href="###" onClick="alert('Ext.data.Store');">Ext.data.Store</a>来绑定数据，这样的话store中数据发生变化时便会自动更新前台。DataView亦提供许多针对对象项（item）的内建事件，如单击、双击、mouseover、mouseout等等，还包括一个内建的选区模型（selection model）。<b>要实现以上这些功能，必须要为DataView对象设置一个itemSelector协同工作。</b>
  <p>下面给出的例子是已将DataView绑定到一个<a href="###" onClick="alert('Ext.data.Store');">Ext.data.Store</a>对象并在一个上<a href="###" onClick="alert('Ext.Panel');">Ext.Panel</a>渲染。</p>
  <pre><code>
var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: [
        'name', 'url',
        {name:'size', type: 'float'},
        {name:'lastmod', type:'date', dateFormat:'timestamp'}
    ]
});
store.load();

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

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

    items: new Ext.DataView({
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'No images to display'
    })
});
panel.render(document.body);
</code></pre
    </div>
    <div class="hr">
    </div>
    <a id="Ext.DataView-configs"></a>
    <h2>配置项</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    配置项
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="tpl-header"></a>
                        <b>tpl</b>
                        : String/Array
                        <div class="mdesc">
                            <div class="short">
                                构成这个DataView的HTML片断，或片断的数组，其格式应正如Ex... 
                            </div>
                            <div class="long">
                                构成这个DataView的HTML片断，或片断的数组，其格式应正如<a href="###" onClick="alert('Ext.XTemplate');">Ext.XTemplate</a>构造器的一样。
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            DataView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="store-header"></a>
                        <b>store</b>
                        : Ext.data.Store
                        <div class="mdesc">
                            <div class="short">
                                此DataView所绑定的{@link Ext.data.Store}
 
                            </div>
                            <div class="long">
                                此DataView所绑定的{@link Ext.data.Store}
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            DataView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="itemSelector-header"></a>
                        <b>itemSelector</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                此项是必须的设置。任何符号Ext.DomQuery格式的CSS选择符，... 
                            </div>
                            <div class="long">
                                <b>此项是必须的设置</b>。任何符号<a href="###" onClick="alert('Ext.DomQuery');">Ext.DomQuery</a>格式的CSS选择符，以确定DataView所使用的节点是哪一种元素
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            DataView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="multiSelect-header"></a>
                        <b>multiSelect</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True表示为允许同时可以选取多个对象项，false表示只能同时选择单... 
                            </div>
                            <div class="long">
                                True表示为允许同时可以选取多个对象项，false表示只能同时选择单个对象项
 at a time or no selection at all, depending on the value of <a href="###" onClick="alert('#singleSelect');">#singleSelect</a> (defaults to false).
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            DataView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="singleSelect-header"></a>
                        <b>singleSelect</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True表示为允许 to allow selection of exa... 
                            </div>
                            <div class="long">
                                True表示为允许 to allow selection of exactly one item at a time, false to allow no selection at all ，false表示没有选区也是可以的（默认为false）。
 注意当<a href="###" onClick="alert('#multiSelect');">#multiSelect</a> = true时，该项会被忽略。
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            DataView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="simpleSelect-header"></a>
                        <b>simpleSelect</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True表示为不需要用户按下Shift或Ctrl键就可以实现多选，fa... 
                            </div>
                            <div class="long">
                                True表示为不需要用户按下Shift或Ctrl键就可以实现多选，false表示用户一定要用户按下Shift或Ctrl键才可以多选对象项（默认为false）。
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            DataView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="overClass-header"></a>
                        <b>overClass</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                视图中每一项mouseover事件触发时所应用到的CSS样式类（默认为... 
                            </div>
                            <div class="long">
                                视图中每一项mouseover事件触发时所应用到的CSS样式类（默认为undefined）
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            DataView
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="loadingText-header"></a>