extjs/build/examples/classic/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                 rootProperty: '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: (Ext.themeName === 'neptune-touch' || Ext.themeName === 'crisp') ? 47: 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: (Ext.themeName === 'neptune-touch' || Ext.themeName === 'crisp') ? 18: 15,
  53             cls: 'listview-filesize'
  54         }]
  55     });
  56
  57     // little bit of feedback
  58     listView.on('selectionchange', function(view, nodes){
  59         var len = nodes.length,
  60             suffix = len === 1 ? '' : 's',
  61             str = 'Simple ListView <i>({0} item{1} selected)</i>';
  62
  63         listView.setTitle(Ext.String.format(str, len, suffix));
  64     });
  65 });