?? ext.dataview.html
字號(hào):
?<!--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"> 能夠?yàn)樽约涸O(shè)計(jì)模板和特定格式而提供的一種數(shù)據(jù)顯示機(jī)制。
DataView采用<a href="###" onClick="alert('Ext.XTemplate');">Ext.XTemplate</a>為其模板處理的機(jī)制，并依靠<a href="###" onClick="alert('Ext.data.Store');">Ext.data.Store</a>來綁定數(shù)據(jù)，這樣的話store中數(shù)據(jù)發(fā)生變化時(shí)便會(huì)自動(dòng)更新前臺(tái)。DataView亦提供許多針對(duì)對(duì)象項(xiàng)（item）的內(nèi)建事件，如單擊、雙擊、mouseover、mouseout等等，還包括一個(gè)內(nèi)建的選區(qū)模型（selection model）。<b>要實(shí)現(xiàn)以上這些功能，必須要為DataView對(duì)象設(shè)置一個(gè)itemSelector協(xié)同工作。</b>
<p>下面給出的例子是已將DataView綁定到一個(gè)<a href="###" onClick="alert('Ext.data.Store');">Ext.data.Store</a>對(duì)象并在一個(gè)上<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(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);
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>配置項(xiàng)</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2"> 配置項(xiàng) </th> <th class="msource-header"> 定義者 </th> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="tpl-header"></a> <b>tpl</b> : String/Array <div class="mdesc"> <div class="short"> 構(gòu)成這個(gè)DataView的HTML片斷，或片斷的數(shù)組，其格式應(yīng)正如Ex... </div> <div class="long"> 構(gòu)成這個(gè)DataView的HTML片斷，或片斷的數(shù)組，其格式應(yīng)正如<a href="###" onClick="alert('Ext.XTemplate');">Ext.XTemplate</a>構(gòu)造器的一樣。
</div> </div> </td> <td class="msource"> DataView </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </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"> </a> </td> <td class="sig"> <a id="itemSelector-header"></a> <b>itemSelector</b> : String <div class="mdesc"> <div class="short"> 此項(xiàng)是必須的設(shè)置。任何符號(hào)Ext.DomQuery格式的CSS選擇符，... </div> <div class="long"> <b>此項(xiàng)是必須的設(shè)置</b>。任何符號(hào)<a href="###" onClick="alert('Ext.DomQuery');">Ext.DomQuery</a>格式的CSS選擇符，以確定DataView所使用的節(jié)點(diǎn)是哪一種元素
</div> </div> </td> <td class="msource"> DataView </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="multiSelect-header"></a> <b>multiSelect</b> : Boolean <div class="mdesc"> <div class="short"> True表示為允許同時(shí)可以選取多個(gè)對(duì)象項(xiàng)，false表示只能同時(shí)選擇單... </div> <div class="long"> True表示為允許同時(shí)可以選取多個(gè)對(duì)象項(xiàng)，false表示只能同時(shí)選擇單個(gè)對(duì)象項(xiàng)
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"> </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表示沒有選區(qū)也是可以的（默認(rèn)為false）。
注意當(dāng)<a href="###" onClick="alert('#multiSelect');">#multiSelect</a> = true時(shí)，該項(xiàng)會(huì)被忽略。
</div> </div> </td> <td class="msource"> DataView </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="simpleSelect-header"></a> <b>simpleSelect</b> : Boolean <div class="mdesc"> <div class="short"> True表示為不需要用戶按下Shift或Ctrl鍵就可以實(shí)現(xiàn)多選，fa... </div> <div class="long"> True表示為不需要用戶按下Shift或Ctrl鍵就可以實(shí)現(xiàn)多選，false表示用戶一定要用戶按下Shift或Ctrl鍵才可以多選對(duì)象項(xiàng)（默認(rèn)為false）。
</div> </div> </td> <td class="msource"> DataView </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="overClass-header"></a> <b>overClass</b> : String <div class="mdesc"> <div class="short"> 視圖中每一項(xiàng)mouseover事件觸發(fā)時(shí)所應(yīng)用到的CSS樣式類（默認(rèn)為... </div> <div class="long"> 視圖中每一項(xiàng)mouseover事件觸發(fā)時(shí)所應(yīng)用到的CSS樣式類（默認(rèn)為undefined）
</div> </div> </td> <td class="msource"> DataView </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="loadingText-header"></a>?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -