data-view.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:2k
源码类别:

JavaScript

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.1.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function(){
  2.     var xd = Ext.data;
  3.     var store = new Ext.data.JsonStore({
  4.         url: 'get-images.php',
  5.         root: 'images',
  6.         fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
  7.     });
  8.     store.load();
  9.     var tpl = new Ext.XTemplate(
  10. '<tpl for=".">',
  11.             '<div class="thumb-wrap" id="{name}">',
  12.     '<div class="thumb"><img src="{url}" title="{name}"></div>',
  13.     '<span class="x-editable">{shortName}</span></div>',
  14.         '</tpl>',
  15.         '<div class="x-clear"></div>'
  16. );
  17.     var panel = new Ext.Panel({
  18.         id:'images-view',
  19.         frame:true,
  20.         width:535,
  21.         autoHeight:true,
  22.         collapsible:true,
  23.         layout:'fit',
  24.         title:'Simple DataView (0 items selected)',
  25.         items: new Ext.DataView({
  26.             store: store,
  27.             tpl: tpl,
  28.             autoHeight:true,
  29.             multiSelect: true,
  30.             overClass:'x-view-over',
  31.             itemSelector:'div.thumb-wrap',
  32.             emptyText: 'No images to display',
  33.             plugins: [
  34.                 new Ext.DataView.DragSelector(),
  35.                 new Ext.DataView.LabelEditor({dataIndex: 'name'})
  36.             ],
  37.             prepareData: function(data){
  38.                 data.shortName = Ext.util.Format.ellipsis(data.name, 15);
  39.                 data.sizeString = Ext.util.Format.fileSize(data.size);
  40.                 data.dateString = data.lastmod.format("m/d/Y g:i a");
  41.                 return data;
  42.             },
  43.             
  44.             listeners: {
  45.              selectionchange: {
  46.              fn: function(dv,nodes){
  47.              var l = nodes.length;
  48.              var s = l != 1 ? 's' : '';
  49.              panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
  50.              }
  51.              }
  52.             }
  53.         })
  54.     });
  55.     panel.render(document.body);
  56. });