ImageDv.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:4k
源码类别:

JavaScript

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.1.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  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);