我想在sencha中将背景图像设置为面板:
修改
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'
}
}
});
但没有显示任何内容。该怎么办?任何帮助表示赞赏。
答案 0 :(得分:1)
你可以吼叫
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'},
]
}
});
答案 1 :(得分:1)
我必须将面板主体的背景设置为透明,否则白色背景会阻止我的图像显示。尝试添加:
bodyStyle: 'background: transparent;',
答案 2 :(得分:1)
使用bodyStyle
config
Ext.create('Ext.panel.Panel', {
border: false,
bodyStyle: {
'background': 'url(wall.jpg) !important'
}
//another config
....
})
答案 3 :(得分:0)
试试这个@ b.i,我们走了!,
var panel = new Ext.Panel({
id:'pnl1',
fullscreen:true,
style: {
background:'#ffffff',
backgroundImage: 'url(path/image/your_image.PNG)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'bottom left',
},
html: '<img class="logo" src="path/image/another_image_yours.jpg"/>',
layout: {
type:'card',
},
items:[]
})
创建此面板,然后可以使用它。尝试创建单个并首先查看您的图像。
backgroundSize: x y
是图片的大小,backgroundPosition: x y
是图片的位置。
我希望能帮助你。 :) Ciao