(一)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
//selectedClass:'x-view-selected', //(默认名)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
紫蝶∏飛揚↗ 阅读(15624)
评论(1) 编辑 收藏 所属分类:
EXTJS 、
重点