Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / desktop / js / Wallpaper.js

diff --git a/examples/desktop/js/Wallpaper.js b/examples/desktop/js/Wallpaper.js
new file mode 100644 (file)
index 0000000..21c7e0e
--- /dev/null
+++ b/examples/desktop/js/Wallpaper.js
@@ -0,0 +1,74 @@
+/*!
+ * Ext JS Library 4.0
+ * Copyright(c) 2006-2011 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+
+/**
+ * @class Ext.ux.desktop.Wallpaper
+ * @extends Ext.Component
+ * <p>This component renders an image that stretches to fill the component.</p>
+ */
+Ext.define('Ext.ux.desktop.Wallpaper', {
+    extend: 'Ext.Component',
+
+    alias: 'widget.wallpaper',
+
+    cls: 'ux-wallpaper',
+    html: '<img src="'+Ext.BLANK_IMAGE_URL+'">',
+
+    stretch: false,
+    wallpaper: null,
+
+    afterRender: function () {
+        var me = this;
+        me.callParent();
+        me.setWallpaper(me.wallpaper, me.stretch);
+    },
+
+    applyState: function () {
+        var me = this, old = me.wallpaper;
+        me.callParent(arguments);
+        if (old != me.wallpaper) {
+            me.setWallpaper(me.wallpaper);
+        }
+    },
+
+    getState: function () {
+        return this.wallpaper && { wallpaper: this.wallpaper };
+    },
+
+    setWallpaper: function (wallpaper, stretch) {
+        var me = this, imgEl, bkgnd;
+
+        me.stretch = (stretch !== false);
+        me.wallpaper = wallpaper;
+
+        if (me.rendered) {
+            imgEl = me.el.dom.firstChild;
+
+            if (!wallpaper || wallpaper == Ext.BLANK_IMAGE_URL) {
+                Ext.fly(imgEl).hide();
+            } else if (me.stretch) {
+                imgEl.src = wallpaper;
+
+                me.el.removeCls('ux-wallpaper-tiled');
+                Ext.fly(imgEl).setStyle({
+                    width: '100%',
+                    height: '100%'
+                }).show();
+            } else {
+                Ext.fly(imgEl).hide();
+
+                bkgnd = 'url('+wallpaper+')';
+                me.el.addCls('ux-wallpaper-tiled');
+            }
+
+            me.el.setStyle({
+                backgroundImage: bkgnd || ''
+            });
+        }
+        return me;
+    }
+});