examples/view/data-view.js

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