+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">\r
+Ext.onReady(function(){\r
+\r
+ var store = new Ext.data.JsonStore({\r
+ url: 'get-images.php',\r
+ root: 'images',\r
+ fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]\r
+ });\r
+ store.load();\r
+\r
+ var listView = new Ext.ListView({\r
+ store: store,\r
+ multiSelect: true,\r
+ emptyText: 'No images to display',\r
+ reserveScrollOffset: true,\r
+\r
+ columns: [{\r
+ header: 'File',\r
+ width: .5,\r
+ dataIndex: 'name'\r
+ },{\r
+ header: 'Last Modified',\r
+ width: .35, \r
+ dataIndex: 'lastmod',\r
+ tpl: '{lastmod:date("m-d h:i a")}'\r
+ },{\r
+ header: 'Size',\r
+ dataIndex: 'size',\r
+ tpl: '{size:fileSize}',\r
+ align: 'right'\r
+ }]\r
+ });\r
+ \r
+ // put it in a Panel so it looks pretty\r
+ var panel = new Ext.Panel({\r
+ id:'images-view',\r
+ width:425,\r
+ height:250,\r
+ collapsible:true,\r
+ layout:'fit',\r
+ title:'Simple ListView <i>(0 items selected)</i>',\r
+ items: listView\r
+ });\r
+ panel.render(document.body);\r
+\r
+ // little bit of feedback\r
+ listView.on('selectionchange', function(view, nodes){\r
+ var l = nodes.length;\r
+ var s = l != 1 ? 's' : '';\r
+ panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');\r
+ });\r
+});</pre> \r
+</body>\r
+</html>
\ No newline at end of file