examples/view/chooser/InfoPanel.js

   1 /**
   2  * @class Ext.chooser.InfoPanel
   3  * @extends Ext.panel.Panel
   4  * @author Ed Spencer
   5  *
   6  * This panel subclass just displays information about an image. We have a simple template set via the tpl property,
   7  * and a single function (loadRecord) which updates the contents with information about another image.
   8  */
   9 Ext.define('Ext.chooser.InfoPanel', {
  10     extend: 'Ext.panel.Panel',
  11     alias : 'widget.infopanel',
  12     id: 'img-detail-panel',
  13
  14     width: 150,
  15     minWidth: 150,
  16
  17     tpl: [
  18         '<div class="details">',
  19             '<tpl for=".">',
  20                     (!Ext.isIE6? '<img src="icons/{thumb}" />' :
  21                     '<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'icons/{thumb}\')"></div>'),
  22                 '<div class="details-info">',
  23                     '<b>Example Name:</b>',
  24                     '<span>{name}</span>',
  25                     '<b>Example URL:</b>',
  26                     '<span><a href="http://dev.sencha.com/deploy/touch/examples/{url}" target="_blank">{url}.html</a></span>',
  27                     '<b>Type:</b>',
  28                     '<span>{type}</span>',
  29                 '</div>',
  30             '</tpl>',
  31         '</div>'
  32     ],
  33
  34     /**
  35      * Loads a given image record into the panel. Animates the newly-updated panel in from the left over 250ms.
  36      */
  37     loadRecord: function(image) {
  38         this.body.hide();
  39         this.tpl.overwrite(this.body, image.data);
  40         this.body.slideIn('l', {
  41             duration: 250
  42         });
  43     }
  44 });