/* * Ext JS Library * Copyright(c) 2006-2020 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, stateful: true, stateId: 'desk-wallpaper', 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 || '' }); if (me.stateful) { me.saveState(); } } return me; }});