examples/view/list-view.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7
   8 Ext.onReady(function(){
   9
  10     var store = new Ext.data.JsonStore({
  11         url: 'get-images.php',
  12         root: 'images',
  13         fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
  14     });
  15     store.load();
  16
  17     var listView = new Ext.list.ListView({
  18         store: store,
  19         multiSelect: true,
  20         emptyText: 'No images to display',
  21         reserveScrollOffset: true,
  22
  23         columns: [{
  24             header: 'File',
  25             width: .5,
  26             dataIndex: 'name'
  27         },{
  28             header: 'Last Modified',
  29             xtype: 'datecolumn',
  30             format: 'm-d h:i a',
  31             width: .35,
  32             dataIndex: 'lastmod'
  33         },{
  34             header: 'Size',
  35             dataIndex: 'size',
  36             tpl: '{size:fileSize}',
  37             align: 'right',
  38             cls: 'listview-filesize'
  39         }]
  40     });
  41
  42     // put it in a Panel so it looks pretty
  43     var panel = new Ext.Panel({
  44         id:'images-view',
  45         width:425,
  46         height:250,
  47         collapsible:true,
  48         layout:'fit',
  49         title:'Simple ListView <i>(0 items selected)</i>',
  50         items: listView
  51     });
  52     panel.render(document.body);
  53
  54     // little bit of feedback
  55     listView.on('selectionchange', function(view, nodes){
  56         var l = nodes.length;
  57         var s = l != 1 ? 's' : '';
  58         panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
  59     });
  60 });