FineUI 官方论坛

标题: 关于DataView控件的问题，求三石兄帮忙 [打印本页]
作者: Fatesy    时间: 2012-6-19 12:41
标题: 关于DataView控件的问题，求三石兄帮忙
本帖最后由 Fatesy 于 2012-6-19 12:52 编辑

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

  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. });
复制代码




欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4