Extjs dataView 详解
(一)js
1 var store = new Ext.data.JsonStore({ 2 url: 'get-images.php', 3 root: 'images', 4 fields: [ 5 'name', 'url', 6 {name:'size', type: 'float'}, 7 {name:'lastmod', type:'date', dateFormat:'timestamp'} 8 ] 9 }); 10 store.load(); 11 var tpl = new Ext.XTemplate( 12 '<tpl for=".">', 13 '<div class="thumb-wrap" id="{name}">', 14 '<div class="thumb"><img src="{url}" title="{name}"></div>', 15 '<span class="x-editable">{shortName}</span></div>', 16 '</tpl>', 17 '<div class="x-clear"></div>' 18 ); 19 var panel = new Ext.Panel({ 20 id:'images-view', 21 frame:true, 22 width:535, 23 autoHeight:true, 24 collapsible:true, 25 layout:'fit', 26 title:'Simple DataView', 27 28 items: new Ext.DataView({ 29 store: store, 30 tpl: tpl, 31 autoHeight:true, 32 multiSelect: true, 33 overClass:'x-view-over', //鼠标悬停item时的类样式,defaults to undefined 34 itemSelector:'div.thumb-wrap', //必须项,值为item选择器,此值也可为.thumb-wrap e.g. div.some-class 35 36 //selectedClass:'x-view-selected', //(默认名)defaults to 'x-view-selected',但仍必须写此类的CSS内容 37 38 emptyText: 'No images to display' 39 40 41 /* 42 43 plugins: [ 44 45 new Ext.DataView.DragSelector(), 46 47 new Ext.DataView.LabelEditor({dataIndex: 'name'}) 48 49 ],*/ 50 51 52 prepareData: function(data){ //数据预处理,即数据处理前.data为原始数据,类型为对象. 53 54 data.shortName = Ext.util.Format.ellipsis(data.name, 15); //指定字符串为15个字符,超出部分用三个圆点代替. 55 56 // data.sizeString = Ext.util.Format.fileSize(data.size); 57 58 // data.dateString = data.lastmod.format("m/d/Y g:i a"); 59 60 return data; 61 62 }, 63 64 65 66 listeners: { 67 68 selectionchange: { //结点的选择发生改变时,即重新选择结点时,可以更改为selectionchange:function(dv,nodes)... 69 70 fn: function(dv,nodes){ 71 72 var l = nodes.length; 73 74 var s = l != 1 ? 's' : ''; 75 76 panel.setTitle('Simple DataView ('+l+' item'+s+' selected)'); 77 78 } 79 80 } 81 82 83 }) 84 }); 85 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:
1 <html> 2 <head> 3 </head> 4 <body id="ext-gen6" class=" ext-gecko ext-gecko3"> 5 --> 6 <h1>DataView Example</h1> 7 <p> 8 </p> 9 <div id="images-view" class="x-panel" style="width: 535px;"> 10 <div class="x-panel-tl"> 11 </div> 12 <div id="ext-gen8" class="x-panel-bwrap"> 13 <div class="x-panel-ml"> 14 <div class="x-panel-mr"> 15 <div class="x-panel-mc"> 16 <div id="ext-gen9" class="x-panel-body" style="width: 523px; height: auto;"> 17 <div id="ext-comp-1001" style="height: auto;"> 18 <div id="kids_hug2.jpg" class="thumb-wrap x-view-selected "> 19 <div class="thumb"> 20 <img title="kids_hug2.jpg" src="images/thumbs/kids_hug2.jpg"/> 21 </div> 22 <span class="x-editable"/> 23 </div> 24 <div id="zack_hat.jpg" class="thumb-wrap "> 25 </div> 26 <div id="zack.jpg" class="thumb-wrap "> 27 </div> 28 <div id="zack_sink.jpg" class="thumb-wrap "> 29 </div> 30 <div id="sara_pink.jpg" class="thumb-wrap"> 31 </div> 32 <div id="dance_fever.jpg" class="thumb-wrap "> 33 <div class="thumb"> 34 <img title="dance_fever.jpg" src="images/thumbs/dance_fever.jpg"/> 35 </div> 36 <span class="x-editable"/> 37 </div> 38 <div id="gangster_zack.jpg" class="thumb-wrap "> 39 </div> 40 <div id="zacks_grill.jpg" class="thumb-wrap"> 41 </div> 42 <div id="kids_hug.jpg" class="thumb-wrap "> 43 </div> 44 <div id="zack_dress.jpg" class="thumb-wrap "> 45 </div> 46 <div id="sara_pumpkin.jpg" class="thumb-wrap"> 47 </div> 48 <div id="sara_smile.jpg" class="thumb-wrap "> 49 </div> 50 <div id="up_to_something.jpg" class="thumb-wrap "> 51 </div> 52 <div class="x-clear"/> 53 </div> 54 </div> 55 </div> 56 </div> 57 </div> 58 <div class="x-panel-bl x-panel-nofooter"> 59 </div> 60 </div> 61 </div> 62 </body> 63 <div id="_firebugConsole" style="display: none;" FirebugVersion="1.4.2"/> 64 </html> 65 66 (三)css 67 #images-view .x-panel-body { 68 -moz-background-clip:border; 69 -moz-background-inline-policy:continuous; 70 -moz-background-origin:padding; 71 -x-system-font:none; 72 background:white none repeat scroll 0 0; 73 font-family:Arial,Helvetica,sans-serif; 74 font-size:11px; 75 font-size-adjust:none; 76 font-stretch:normal; 77 font-style:normal; 78 font-variant:normal; 79 font-weight:normal; 80 line-height:normal; 81 } 82 #images-view .thumb { 83 -moz-background-clip:border; 84 -moz-background-inline-policy:continuous; 85 -moz-background-origin:padding; 86 background:#DDDDDD none repeat scroll 0 0; 87 padding:3px; 88 } 89 #images-view .thumb img { 90 height:60px; 91 width:80px; 92 } 93 #images-view .thumb-wrap { 94 float:left; 95 margin:4px 0 4px 4px; 96 padding:5px; 97 } 98 #images-view .thumb-wrap span { 99 display:block; 100 overflow:hidden; 101 text-align:center; 102 } 103 #images-view .x-view-over { 104 -moz-background-clip:border; 105 -moz-background-inline-policy:continuous; 106 -moz-background-origin:padding; 107 background:#EFEFEF url(../../resources/images/default/grid/row-over.gif) repeat-x scroll left top; 108 border:1px solid #DDDDDD; 109 padding:4px; 110 } 111 #images-view .x-view-selected { 112 -moz-background-clip:border; 113 -moz-background-inline-policy:continuous; 114 -moz-background-origin:padding; 115 background:#EFF5FB url(images/selected.gif) no-repeat scroll right bottom; 116 border:1px solid #99BBE8; 117 padding:4px; 118 } 119 #images-view .x-view-selected .thumb { 120 -moz-background-clip:border; 121 -moz-background-inline-policy:continuous; 122 -moz-background-origin:padding; 123 background:transparent none repeat scroll 0 0; 124 } 125 #images-view .loading-indicator { 126 background-image:url(../../resources/images/default/grid/loading.gif); 127 background-position:left center; 128 background-repeat:no-repeat; 129 font-size:11px; 130 margin:10px; 131 padding-left:20px; 132 }
