examples/image-organizer/imgorg/ImagePanel.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Imgorg.ImagePanel = Ext.extend(Ext.Panel,{
   8     closable: true,
   9     border: false,
  10     tagTpl: new Ext.XTemplate(
  11         '<h3 class="image-prop-header">Tags</h3>',
  12         '<tpl for=".">',
  13             '<div class="image-prop">{text}</div>',
  14         '</tpl>'
  15     ),
  16     albumTpl: new Ext.XTemplate(
  17         '<h3 class="image-prop-header">Album</h3>',
  18         '<tpl for=".">',
  19             '<div class="image-prop">{text}</div>',
  20         '</tpl>'
  21     ),
  22     infoTpl: new Ext.XTemplate(
  23         '<h3 class="image-prop-header">File Info</h3>',
  24         '<div class="image-prop">Filename: {FileName}</div>',
  25         '<div class="image-prop">Size: {FileSize:fileSize}</div>',
  26         '<div class="image-prop">Height: {[values["COMPUTED"].Height]}</div>',
  27         '<div class="image-prop">Width: {[values["COMPUTED"].Width]}</div>'
  28     ),
  29     initComponent: function() {
  30         Ext.apply(this,{
  31             layout: 'border',
  32             items: [{
  33                 border: false,
  34                 region: 'center',
  35                 html: '<div style="text-align:center;"><img src="'+this.url+'"/></div>',
  36                 autoScroll: true
  37             },{
  38                 border: false,
  39                 region: 'east',
  40                 itemId: 'image-properties',
  41                 width: 250,
  42                 title: 'Properties',
  43                 collapsible: true,
  44                 style: 'border-left: 1px solid #99BBE8'
  45             }]
  46         });
  47         Imgorg.ImagePanel.superclass.initComponent.call(this);
  48     },
  49
  50     afterRender: function() {
  51         Imgorg.ImagePanel.superclass.afterRender.call(this);
  52         Imgorg.ss.Images.getInfo({image: this.imageData.id}, this.onGetInfo, this);
  53         Imgorg.ss.Albums.getAlbums({image: this.imageData.id}, this.onGetAlbums,this);
  54         Imgorg.ss.Tags.getTags({image: this.imageData.id}, this.onGetTags, this);
  55     },
  56
  57     onGetInfo: function(data, resp) {
  58         var prop = this.getComponent('image-properties');
  59         this.infoTpl.append(prop.body, data)
  60     },
  61
  62     onGetTags: function(data, resp) {
  63         var prop = this.getComponent('image-properties');
  64         this.tagTpl.append(prop.body, data);
  65     },
  66
  67     onGetAlbums: function(data, resp) {
  68         var prop = this.getComponent('image-properties');
  69         this.albumTpl.append(prop.body, data);
  70     }
  71 });
  72 Ext.reg('img-panel',Imgorg.ImagePanel);