ImagePanel.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:2k
源码类别:

中间件编程

开发平台:

JavaScript

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