examples/view/list-view.js

   1 /*!
   2  * Ext JS Library 3.1.0
   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.list.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             xtype: 'datecolumn',\r
  30             format: 'm-d h:i a',\r
  31             width: .35, \r
  32             dataIndex: 'lastmod'\r
  33         },{\r
  34             header: 'Size',\r
  35             dataIndex: 'size',\r
  36             tpl: '{size:fileSize}',\r
  37             align: 'right',\r
  38             cls: 'listview-filesize'\r
  39         }]\r
  40     });\r
  41     \r
  42     // put it in a Panel so it looks pretty\r
  43     var panel = new Ext.Panel({\r
  44         id:'images-view',\r
  45         width:425,\r
  46         height:250,\r
  47         collapsible:true,\r
  48         layout:'fit',\r
  49         title:'Simple ListView <i>(0 items selected)</i>',\r
  50         items: listView\r
  51     });\r
  52     panel.render(document.body);\r
  53 \r
  54     // little bit of feedback\r
  55     listView.on('selectionchange', function(view, nodes){\r
  56         var l = nodes.length;\r
  57         var s = l != 1 ? 's' : '';\r
  58         panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');\r
  59     });\r
  60 });