examples/image-organizer/imgorg/ImageDv.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Imgorg.ImageDv = Ext.extend(Ext.DataView,{
   8     tpl: new Ext.XTemplate(
   9         '<tpl for=".">',
  10         '<div class="thumb-wrap" id="{id}">',
  11         '<div class="thumb"><img src="images/thumbs/{filename}" class="thumb-img"></div>',
  12         '<span class="x-editable">{filename:ellipsis(15)}</span></div>',
  13         '</tpl>'
  14     ),
  15
  16     initComponent: function() {
  17         Ext.apply(this, {
  18             itemSelector: 'div.thumb-wrap',
  19             style: 'overflow:auto',
  20             multiSelect: true,
  21             overClass: 'x-view-over',
  22             emptyText: 'No images to display',
  23             plugins: [new Ext.DataView.DragSelector({
  24                 dragSafe: true
  25             }), new Ext.DataView.LabelEditor({
  26                 allowBlank: false,
  27                 alignment: 'c-c',
  28                 dataIndex: 'filename'
  29             })],
  30             store: new Ext.data.DirectStore({
  31                 directFn: Imgorg.ss.Images.load,
  32                 root: '',
  33                 fields: ['filename', 'url', 'id', 'size']
  34             })
  35         });
  36
  37         this.addEvents('viewitem');
  38         Imgorg.ImageDv.superclass.initComponent.call(this);
  39         this.on({// hacks to force the labeleditor to stop editing when we get a click elsewhere
  40             click: function() {
  41                 this.plugins[1].completeEdit();
  42             },
  43             containerclick: function(dv, e) {
  44                 this.plugins[1].completeEdit();
  45             },
  46             contextmenu: this.onContextMenu,
  47             containercontextmenu: this.onContextMenu,
  48             scope: this
  49         });
  50         this.store.on('update', this.syncRename, this);
  51     },
  52
  53     afterRender: function() {
  54         Imgorg.ImageDv.superclass.afterRender.call(this);
  55         this.el.unselectable(); // messy if they can select the text of the file names
  56     },
  57
  58     onContextMenu: function(e, node) {
  59         e.stopEvent();
  60         if(!this.contMenu) {
  61             this.contMenu = new Ext.menu.Menu({
  62                 items: [{
  63                     text: 'View in Tab(s)',
  64                     handler: function() {
  65                         this.fireEvent('viewitem', this, node);
  66                     },
  67                     scope: this
  68                 },{
  69                     text: 'Add to Album',
  70                     handler: this.selectAlbum,
  71                     scope: this
  72                 },{
  73                     text: 'Tag',
  74                     handler: this.tag,
  75                     scope: this
  76                 },{
  77                     text: 'Remove',
  78                     handler: this.removeImages,
  79                     scope: this
  80                 }]
  81             });
  82         }
  83         this.currentNode = node;
  84         this.contMenu.showAt(e.getXY());
  85     },
  86
  87     selectAlbum: function() {
  88         if (!this.albumWin) {
  89             this.albumWin = new Imgorg.AlbumWin();
  90         }
  91         this.albumWin.selectedRecords = this.getSelectedRecords();
  92         this.albumWin.show(this.currentNode);
  93     },
  94
  95     tag: function() {
  96         Imgorg.TagWin.selectedRecords = this.getSelectedRecords();
  97         Imgorg.TagWin.show(this.currentNode);
  98     },
  99
 100     syncRename: function(store, rec, op) {
 101         if (op == 'edit') {
 102             Imgorg.ss.Images.rename({image: rec.data.id, name: rec.data.filename, url: rec.data.url});
 103         }
 104     },
 105
 106     removeImages: function() {
 107         var recs = this.getSelectedRecords();
 108         var imageIds = [];
 109         for (var i = 0;i < recs.length;i++) {
 110             imageIds.push(recs[i].data.id);
 111             this.store.remove(recs[i]);
 112         }
 113         Imgorg.ss.Images.remove({images: imageIds});
 114     }
 115 });
 116 Ext.reg('img-dv', Imgorg.ImageDv);