examples/grid/list-view.js

   1 Ext.require([
   2     'Ext.grid.*',
   3     'Ext.data.*',
   4     'Ext.panel.*'
   5 ]);
   6 Ext.onReady(function(){
   7     Ext.define('ImageModel', {
   8         extend: 'Ext.data.Model',
   9         fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
  10     });
  11     var store = Ext.create('Ext.data.JsonStore', {
  12         model: 'ImageModel',
  13         proxy: {
  14             type: 'ajax',
  15             url: 'get-images.php',
  16             reader: {
  17                 type: 'json',
  18                 root: 'images'
  19             }
  20         }
  21     });
  22     store.load();
  23
  24     var listView = Ext.create('Ext.grid.Panel', {
  25         width:425,
  26         height:250,
  27         collapsible:true,
  28         title:'Simple ListView <i>(0 items selected)</i>',
  29         renderTo: Ext.getBody(),
  30
  31         store: store,
  32         multiSelect: true,
  33         viewConfig: {
  34             emptyText: 'No images to display'
  35         },
  36
  37         columns: [{
  38             text: 'File',
  39             flex: 50,
  40             dataIndex: 'name'
  41         },{
  42             text: 'Last Modified',
  43             xtype: 'datecolumn',
  44             format: 'm-d h:i a',
  45             flex: 35,
  46             dataIndex: 'lastmod'
  47         },{
  48             text: 'Size',
  49             dataIndex: 'size',
  50             tpl: '{size:fileSize}',
  51             align: 'right',
  52             flex: 15,
  53             cls: 'listview-filesize'
  54         }]
  55     });
  56
  57     // little bit of feedback
  58     listView.on('selectionchange', function(view, nodes){
  59         var l = nodes.length;
  60         var s = l != 1 ? 's' : '';
  61         listView.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
  62     });
  63 });