examples/view/data-view.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux.DataView', '../ux/DataView/');
   4
   5 Ext.require([
   6     'Ext.data.*',
   7     'Ext.util.*',
   8     'Ext.view.View',
   9     'Ext.ux.DataView.DragSelector',
  10     'Ext.ux.DataView.LabelEditor'
  11 ]);
  12
  13 Ext.onReady(function(){
  14     ImageModel = Ext.define('ImageModel', {
  15         extend: 'Ext.data.Model',
  16         fields: [
  17            {name: 'name'},
  18            {name: 'url'},
  19            {name: 'size', type: 'float'},
  20            {name:'lastmod', type:'date', dateFormat:'timestamp'}
  21         ]
  22     });
  23
  24     var store = Ext.create('Ext.data.Store', {
  25         model: 'ImageModel',
  26         proxy: {
  27             type: 'ajax',
  28             url: 'get-images.php',
  29             reader: {
  30                 type: 'json',
  31                 root: 'images'
  32             }
  33         }
  34     });
  35     store.load();
  36
  37     Ext.create('Ext.Panel', {
  38         id: 'images-view',
  39         frame: true,
  40         collapsible: true,
  41         width: 535,
  42         renderTo: 'dataview-example',
  43         title: 'Simple DataView (0 items selected)',
  44         items: Ext.create('Ext.view.View', {
  45             store: store,
  46             tpl: [
  47                 '<tpl for=".">',
  48                     '<div class="thumb-wrap" id="{name}">',
  49                     '<div class="thumb"><img src="{url}" title="{name}"></div>',
  50                     '<span class="x-editable">{shortName}</span></div>',
  51                 '</tpl>',
  52                 '<div class="x-clear"></div>'
  53             ],
  54             multiSelect: true,
  55             height: 310,
  56             trackOver: true,
  57             overItemCls: 'x-item-over',
  58             itemSelector: 'div.thumb-wrap',
  59             emptyText: 'No images to display',
  60             plugins: [
  61                 Ext.create('Ext.ux.DataView.DragSelector', {}),
  62                 Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
  63             ],
  64             prepareData: function(data) {
  65                 Ext.apply(data, {
  66                     shortName: Ext.util.Format.ellipsis(data.name, 15),
  67                     sizeString: Ext.util.Format.fileSize(data.size),
  68                     dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
  69                 });
  70                 return data;
  71             },
  72             listeners: {
  73                 selectionchange: function(dv, nodes ){
  74                     var l = nodes.length,
  75                         s = l !== 1 ? 's' : '';
  76                     this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
  77                 }
  78             }
  79         })
  80     });
  81 });