extjs中dataview例证

Ext.onReady(function(){
???
??? var myData = [
??????? ['dance_fever.jpg', 'images/dance_fever.jpg',71.72,'9/1 12:00am'],
??????? ['gangster_zack.jpg', 'images/gangster_zack.jpg',29.01,'9/1 12:00am'],
??????? ['kids_hug2.jpg', 'images/kids_hug2.jpg',83.81,'9/1 12:00am'],
??????? ['kids_hug.jpg', 'images/kids_hug.jpg',29.01,'9/1 12:00am'],
??????? ['sara_pink.jpg', 'images/sara_pink.jpg',29.01,'9/1 12:00am'],
??????? ['sara_pumpkin.jpg', 'images/sara_pumpkin.jpg',29.01,'9/1 12:00am'],
??????? ['sara_smile.jpg', 'images/sara_smile.jpg',29.01,'9/1 12:00am'],
??????? ['up_to_something.jpg', 'images/up_to_something.jpg',29.01,'9/1 12:00am'],
??????? ['zack.jpg', 'images/zack.jpg',29.01,'9/1 12:00am'],
??????? ['zack_dress.jpg', 'images/zack_dress.jpg',29.01,'9/1 12:00am'],
??????? ['zack_hat.jpg', 'images/zack_hat.jpg',29.01,'9/1 12:00am'],
??????? ['zack_sink.jpg', 'images/zack_sink.jpg',29.01,'9/1 12:00am'],
??????? ['zacks_grill.jpg', 'images/zacks_grill.jpg',29.01,'9/1 12:00am']
??? ];
???
??

??? var store = new Ext.data.SimpleStore({
??????? fields: [
?????????? {name: 'name'},
?????????? {name: 'url'},
?????????? {name: 'size', type: 'float'},
?????????? {name:'lastmod', type: 'date', dateFormat: 'n/j h:ia'}
??????? ]
??? });
??? store.loadData(myData);

??? 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 (0 items selected)',

??????? 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
??????????? 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);
??????????????? //data.sizeString = Ext.util.Format.fileSize(data.size);
??????????????? //data.dateString = data.lastmod.format("n/j h:ia");
??????????????? 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);

});