docs/source/data-view.html

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