(一)js
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', //鼠標懸停item時的類樣式,defaults to undefined
itemSelector:'div.thumb-wrap', //必須項,值為item選擇器,此值也可為.thumb-wrap e.g. div.some-class
// //(默認名)defaults to 'x-view-selected',但仍必須寫此類的CSS內容
emptyText: 'No images to display'
/*
plugins: [
new Ext.DataView.DragSelector(),
new Ext.DataView.LabelEditor({dataIndex: 'name'})
],*/
prepareData: function(data){ //數據預處理,即數據處理前.data為原始數據,類型為對象.
data.shortName = Ext.util.Format.ellipsis(data.name, 15); //指定字符串為15個字符,超出部分用三個圓點代替.
// data.sizeString = Ext.util.Format.fileSize(data.size);
// data.dateString = data.lastmod.format("m/d/Y g:i a");
return data;
},
listeners: {
selectionchange: { //結點的選擇發生改變時,即重新選擇結點時,可以更改為selectionchange:function(dv,nodes)...
fn: function(dv,nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
}
}
})
});
panel.render(document.body);
DataView 用store提供的數據流，采用tpl的格式顯示，itemSelector的值為數據流中塊的CSS類選擇器，對塊操作時更換其CSS類樣式,如鼠標懸停在塊上和塊被選定時的CSS類樣式;簡單點說,就是有利于對數據流中的塊好控制操作.
tpl定義的塊：<div id="zack_hat.jpg" class="thumb-wrap">
鼠標懸停時的塊（overClass）：<div id="zack_hat.jpg" class="thumb-wrap x-view-over">
點擊被選中的塊（selectedClass）：<div id="kids_hug2.jpg" class="thumb-wrap x-view-selected">
1.當鼠標點擊數據流中某一塊時，塊增加selectedClass定義的類樣式，如沒定義類名,即采用默認的類名'x-view-selected'（CSS內容依然為空,仍需手寫,只是類名必須為此）；
2.用overClass定義的CSS類樣式，鼠標懸停在塊(div)上，更換其CSS類樣式.
3.dataView.store.filter(f1,f2):從store中查找f1字段,與f2匹配(不完全匹配相同)過濾,重新本地加載數據.
4.dataView.store.store(f1,'asc'/'desc'):store的內容按f1的值排序.
5.dataView.store.clearFilter():清除過濾狀態.還原初始.
6.dataView.select(n):更換第n個塊的CSS類樣式.
(二)html:
<html>
<head>
</head>
<body id="ext-gen6" class=" ext-gecko ext-gecko3">
-->
<h1>DataView Example</h1>
<p>
</p>
<div id="images-view" class="x-panel" style="width: 535px;">
<div class="x-panel-tl">
</div>
<div id="ext-gen8" class="x-panel-bwrap">
<div class="x-panel-ml">
<div class="x-panel-mr">
<div class="x-panel-mc">
<div id="ext-gen9" class="x-panel-body" style="width: 523px; height: auto;">
<div id="ext-comp-1001" style="height: auto;">
<div id="kids_hug2.jpg" class="thumb-wrap x-view-selected ">
<div class="thumb">
<img title="kids_hug2.jpg" src="images/thumbs/kids_hug2.jpg"/>
</div>
<span class="x-editable"/>
</div>
<div id="zack_hat.jpg" class="thumb-wrap ">
</div>
<div id="zack.jpg" class="thumb-wrap ">
</div>
<div id="zack_sink.jpg" class="thumb-wrap ">
</div>
<div id="sara_pink.jpg" class="thumb-wrap">
</div>
<div id="dance_fever.jpg" class="thumb-wrap ">
<div class="thumb">
<img title="dance_fever.jpg" src="images/thumbs/dance_fever.jpg"/>
</div>
<span class="x-editable"/>
</div>
<div id="gangster_zack.jpg" class="thumb-wrap ">
</div>
<div id="zacks_grill.jpg" class="thumb-wrap">
</div>
<div id="kids_hug.jpg" class="thumb-wrap ">
</div>
<div id="zack_dress.jpg" class="thumb-wrap ">
</div>
<div id="sara_pumpkin.jpg" class="thumb-wrap">
</div>
<div id="sara_smile.jpg" class="thumb-wrap ">
</div>
<div id="up_to_something.jpg" class="thumb-wrap ">
</div>
<div class="x-clear"/>
</div>
</div>
</div>
</div>
</div>
<div class="x-panel-bl x-panel-nofooter">
</div>
</div>
</div>
</body>
<div id="_firebugConsole" style="display: none;" FirebugVersion="1.4.2"/>
</html>
(三)css
#images-view .x-panel-body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:white none repeat scroll 0 0;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#images-view .thumb {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#DDDDDD none repeat scroll 0 0;
padding:3px;
}
#images-view .thumb img {
height:60px;
width:80px;
}
#images-view .thumb-wrap {
float:left;
margin:4px 0 4px 4px;
padding:5px;
}
#images-view .thumb-wrap span {
display:block;
overflow:hidden;
text-align:center;
}
#images-view .x-view-over {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EFEFEF url(../../resources/images/default/grid/row-over.gif) repeat-x scroll left top;
border:1px solid #DDDDDD;
padding:4px;
}
#images-view .x-view-selected {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EFF5FB url(images/selected.gif) no-repeat scroll right bottom;
border:1px solid #99BBE8;
padding:4px;
}
#images-view .x-view-selected .thumb {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
}
#images-view .loading-indicator {
background-image:url(../../resources/images/default/grid/loading.gif);
background-position:left center;
background-repeat:no-repeat;
font-size:11px;
margin:10px;
padding-left:20px;
}
posted on 2009-09-08 14:10
紫蝶∏飛揚↗ 閱讀(15644)
評論(1) 編輯 收藏 所屬分類:
EXTJS 、
重點