examples/desktop/js/Wallpaper.js

   1 /*!
   2  * Ext JS Library 4.0
   3  * Copyright(c) 2006-2011 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7
   8 /**
   9  * @class Ext.ux.desktop.Wallpaper
  10  * @extends Ext.Component
  11  * <p>This component renders an image that stretches to fill the component.</p>
  12  */
  13 Ext.define('Ext.ux.desktop.Wallpaper', {
  14     extend: 'Ext.Component',
  15
  16     alias: 'widget.wallpaper',
  17
  18     cls: 'ux-wallpaper',
  19     html: '<img src="'+Ext.BLANK_IMAGE_URL+'">',
  20
  21     stretch: false,
  22     wallpaper: null,
  23
  24     afterRender: function () {
  25         var me = this;
  26         me.callParent();
  27         me.setWallpaper(me.wallpaper, me.stretch);
  28     },
  29
  30     applyState: function () {
  31         var me = this, old = me.wallpaper;
  32         me.callParent(arguments);
  33         if (old != me.wallpaper) {
  34             me.setWallpaper(me.wallpaper);
  35         }
  36     },
  37
  38     getState: function () {
  39         return this.wallpaper && { wallpaper: this.wallpaper };
  40     },
  41
  42     setWallpaper: function (wallpaper, stretch) {
  43         var me = this, imgEl, bkgnd;
  44
  45         me.stretch = (stretch !== false);
  46         me.wallpaper = wallpaper;
  47
  48         if (me.rendered) {
  49             imgEl = me.el.dom.firstChild;
  50
  51             if (!wallpaper || wallpaper == Ext.BLANK_IMAGE_URL) {
  52                 Ext.fly(imgEl).hide();
  53             } else if (me.stretch) {
  54                 imgEl.src = wallpaper;
  55
  56                 me.el.removeCls('ux-wallpaper-tiled');
  57                 Ext.fly(imgEl).setStyle({
  58                     width: '100%',
  59                     height: '100%'
  60                 }).show();
  61             } else {
  62                 Ext.fly(imgEl).hide();
  63
  64                 bkgnd = 'url('+wallpaper+')';
  65                 me.el.addCls('ux-wallpaper-tiled');
  66             }
  67
  68             me.el.setStyle({
  69                 backgroundImage: bkgnd || ''
  70             });
  71         }
  72         return me;
  73     }
  74 });