Sencha touch Sencha：将图像设置为面板的背景

我想在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'
    }
}

});

---

但是什么也没有显示。怎么办？感谢您的帮助

试试这个@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:[]
})

var面板=新的外部面板({
id:'pnl1'，
全屏：对，
风格：{
背景：“#ffffff”，
背景图片：“url（path/image/your_image.PNG）”，
背景尺寸：“100%100%”，
背景重复：“不重复”，
背景位置：“左下角”，
},
html:“”，
布局：{
类型：'卡片'，
},
项目：[]
})

创建此面板后，您可以使用它。尝试创建单张，然后首先查看您的图像

backgroundSize:xy

是图像的大小，

backgroundPosition:xy

是图像的位置

我希望能帮助你再见

你可以按下面的方式做

   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'},

        ]
    }

});

Ext.define（'MyApp.view.WelcomePanel'{
扩展：“Ext.form.Panel”，
别名：“widget.WelcomePanel”，
配置：{
样式：“背景色：白色；”，
itemId:“WelcomePanel”，
全屏：对，
布局：“卡片”，
html:“”，
项目：[
{xtype:'MainPanel'，停靠：'top'}，
]
}
});

我必须将面板主体的背景设置为透明，否则白色背景会阻止我的图像显示。尝试添加以下内容：

bodyStyle: 'background: transparent;',

---

使用

bodyStyle

config

Ext.create('Ext.panel.Panel', {
        border: false,
        bodyStyle: {
        'background': 'url(wall.jpg) !important'
         }
        //another config
        ....
    })

---

您确定在

url（）中引用了正确的位置吗？

？是的，在url（）中引用了正确的位置。请尝试只设置

背景色。可能是面板未正确启动，或其高度/宽度为0<代码>#ff00ff

是一种有用的调试颜色；-）那么问题不在于背景图像的CSS声明，而在于面板的尺寸，或者整个CSS声明。你有一个链接，我们可以看看，因为它将更容易调试。我会显示我的代码。我的问题被编辑了，我的代码完全显示出来了。我把风格：{background:'#ffffff'，backgroundImage:'url（path/image/your_image.PNG）'，backgroundSize:'10%85%'，backgroundRepeat:'no repeat'，backgroundPosition:'bottom left'，}在一个错误的地方？我更新我的答案@b.I任何让我知道或接受这个答案：）