关于DataView控件的问题，求三石兄帮忙

Fatesy

DataView在有一些场合下非常必要,最近项目中需要实现类似的功能，extjs已经提供了,可惜extaspnet还没封装，只能尝试用extjs实现了，最后还是实现了。
本来想修改extaspnet的源码，直接把控件嵌进extaspnet内部.但是是由于对extaspnet的框架不是非常理解,花费了很多精力依然无果，只能求三石兄帮忙了。

关键的代码如下

1. 
   
2. Ext.onReady(function () {
   
3.     var myData = [
   
4.         ['dance_fever.jpg', 'images/dance_fever.jpg', 71.72, '9/1 12:00am'],
   
5.         ['gangster_zack.jpg', 'images/gangster_zack.jpg', 29.01, '9/1 12:00am'],
   
6.         ['kids_hug2.jpg', 'images/kids_hug2.jpg', 83.81, '9/1 12:00am'],
   
7.         ['kids_hug.jpg', 'images/kids_hug.jpg', 29.01, '9/1 12:00am'],
   
8.         ['sara_pink.jpg', 'images/sara_pink.jpg', 29.01, '9/1 12:00am'],
   
9.         ['sara_pumpkin.jpg', 'images/sara_pumpkin.jpg', 29.01, '9/1 12:00am'],
   
10.         ['sara_smile.jpg', 'images/sara_smile.jpg', 29.01, '9/1 12:00am'],
    
11.         ['up_to_something.jpg', 'images/up_to_something.jpg', 29.01, '9/1 12:00am'],
    
12.         ['zack.jpg', 'images/zack.jpg', 29.01, '9/1 12:00am'],
    
13.         ['zack_dress.jpg', 'images/zack_dress.jpg', 29.01, '9/1 12:00am'],
    
14.         ['zack_hat.jpg', 'images/zack_hat.jpg', 29.01, '9/1 12:00am'],
    
15.         ['zack_sink.jpg', 'images/zack_sink.jpg', 29.01, '9/1 12:00am'],
    
16.         ['zacks_grill.jpg', 'images/zacks_grill.jpg', 29.01, '9/1 12:00am']
    
17.     ];
    
18.     var store = new Ext.data.SimpleStore({
    
19.         fields: [
    
20.            { name: 'name' },
    
21.            { name: 'url' },
    
22.            { name: 'size', type: 'float' },
    
23.            { name: 'lastmod', type: 'date', dateFormat: 'n/j h:ia' }
    
24.         ]
    
25.     });
    
26.     store.loadData(myData);
    
27.     var tpl = new Ext.XTemplate(
    
28.   '<tpl for=".">',
    
29.             '<div class="thumb-wrap" id="{name}">',
    
30.       '<div class="thumb"><img src="{url}" title="{name}"></div>',
    
31.       '<span  >{shortName}</span></div>',
    
32.         '</tpl>',
    
33.         '<div class="x-clear"></div>'
    
34. );
    
35.     var panel = new Ext.Panel({
    
36.         id:'images-view',
    
37.         frame:true,
    
38.         width:215,
    
39.         collapsible:true,
    
40.         layout:'fit',
    
41.         title:'Simple DataView (0 items selected)',
    
42.         items: new Ext.DataView({
    
43.             store: store,
    
44.             tpl: tpl,
    
45.             overClass: 'x-view-selected',
    
46.             itemSelector:'div.thumb-wrap',
    
47.             emptyText: 'No images to display',
    
48.             prepareData: function(data){
    
49.                 data.shortName = Ext.util.Format.ellipsis(data.name, 15);
    
50.                 data.sizeString = Ext.util.Format.fileSize(data.size);
    
51.                 data.dateString = data.lastmod.format("m/d/Y g:i a");
    
52.                 return data;
    
53.             },
    
54.             
    
55.             listeners: {      
    
56.                click : {
    
57.                     fn : function( dataView, index, node, e) {
    
58.                          var record = dataView.getRecord(node);
    
59.                          alert(record.get("name"));
    
60.                     }
    
61.                 }
    
62.             }
    
63.         })
    
64.     });
    
65.     panel.render(document.body);
    
66. });

复制代码