Sencha: set image as background to a panel
16,343
Solution 1
You can do as bellow
Ext.define('MyApp.view.WelcomePanel', {
extend: 'Ext.form.Panel',
alias: 'widget.WelcomePanel',
config: {
style:"background-color:white;",
itemId:'WelcomePanel',
fullscreen:true,
layout: 'card',
html:'<div align="center" style="background-color:white;" ><img src="http://src.sencha.io/http://yoursite.com/splash.png" ></div>',
items: [
{xtype:'MainPanel', docked:'top'},
]
}
});
Solution 2
I had to set the background of the panel body to transparent, because otherwise that white background prevented my image from showing. Try adding this:
bodyStyle: 'background: transparent;',
Solution 3
Use bodyStyle
config
Ext.create('Ext.panel.Panel', {
border: false,
bodyStyle: {
'background': 'url(wall.jpg) !important'
}
//another config
....
})
Author by
b.i
Updated on June 04, 2022Comments
-
b.i almost 2 years
I want to set a background image in sencha to a panel:
EDIT
Ext.define('components.NewPanel', { extend: 'Ext.Panel', style: { background:'#ffffff', backgroundImage: 'url(icon.PNG)', backgroundSize: '10% 85%', backgroundRepeat: 'no-repeat', backgroundPosition: 'bottom left', }, initialize: function () { var newIcon=Ext.create('Ext.Img', { src: "image1.png", cls: "img", scope: this, listeners: { tap: { fn :function (img, evt) { Ext.Msg.alert("This is a test"); },// function }// tap }//listeners });//create this.add([newIcon]); }, config: { layout: { type: 'fit' } } });
But nothing is displayed. What to do? any help is appreciated.