examples/view/data-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 Ext.onReady(function(){
   8     var xd = Ext.data;
   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 tpl = new Ext.XTemplate(
  18                 '<tpl for=".">',
  19             '<div class="thumb-wrap" id="{name}">',
  20                     '<div class="thumb"><img src="{url}" title="{name}"></div>',
  21                     '<span class="x-editable">{shortName}</span></div>',
  22         '</tpl>',
  23         '<div class="x-clear"></div>'
  24         );
  25
  26     var panel = new Ext.Panel({
  27         id:'images-view',
  28         frame:true,
  29         width:535,
  30         autoHeight:true,
  31         collapsible:true,
  32         layout:'fit',
  33         title:'Simple DataView (0 items selected)',
  34
  35         items: new Ext.DataView({
  36             store: store,
  37             tpl: tpl,
  38             autoHeight:true,
  39             multiSelect: true,
  40             overClass:'x-view-over',
  41             itemSelector:'div.thumb-wrap',
  42             emptyText: 'No images to display',
  43
  44             plugins: [
  45                 new Ext.DataView.DragSelector(),
  46                 new Ext.DataView.LabelEditor({dataIndex: 'name'})
  47             ],
  48
  49             prepareData: function(data){
  50                 data.shortName = Ext.util.Format.ellipsis(data.name, 15);
  51                 data.sizeString = Ext.util.Format.fileSize(data.size);
  52                 data.dateString = data.lastmod.format("m/d/Y g:i a");
  53                 return data;
  54             },
  55
  56             listeners: {
  57                 selectionchange: {
  58                         fn: function(dv,nodes){
  59                                 var l = nodes.length;
  60                                 var s = l != 1 ? 's' : '';
  61                                 panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
  62                         }
  63                 }
  64             }
  65         })
  66     });
  67     panel.render(document.body);
  68
  69 });