examples/view/list-view.js

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