docs/source/ImagePanel.html

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