examples/view/data-view.js

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