docs/source/list-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">\r
   9 Ext.onReady(function(){\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 listView = new Ext.ListView({\r
  19         store: store,\r
  20         multiSelect: true,\r
  21         emptyText: 'No images to display',\r
  22         reserveScrollOffset: true,\r
  23 \r
  24         columns: [{\r
  25             header: 'File',\r
  26             width: .5,\r
  27             dataIndex: 'name'\r
  28         },{\r
  29             header: 'Last Modified',\r
  30             width: .35, \r
  31             dataIndex: 'lastmod',\r
  32             tpl: '{lastmod:date("m-d h:i a")}'\r
  33         },{\r
  34             header: 'Size',\r
  35             dataIndex: 'size',\r
  36             tpl: '{size:fileSize}',\r
  37             align: 'right'\r
  38         }]\r
  39     });\r
  40     \r
  41     // put it in a Panel so it looks pretty\r
  42     var panel = new Ext.Panel({\r
  43         id:'images-view',\r
  44         width:425,\r
  45         height:250,\r
  46         collapsible:true,\r
  47         layout:'fit',\r
  48         title:'Simple ListView <i>(0 items selected)</i>',\r
  49         items: listView\r
  50     });\r
  51     panel.render(document.body);\r
  52 \r
  53     // little bit of feedback\r
  54     listView.on('selectionchange', function(view, nodes){\r
  55         var l = nodes.length;\r
  56         var s = l != 1 ? 's' : '';\r
  57         panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');\r
  58     });\r
  59 });</pre>    \r
  60 </body>\r
  61 </html>