Sencha: set Bild als hintergrund für ein panel

Möchte ich ein Hintergrundbild einstellen, in sencha zu einem panel:

BEARBEITEN

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

});

Aber es wird nichts angezeigt. Was ist zu tun? jede Hilfe ist willkommen.

Sind Sie sicher, dass Sie verweisen auf die richtige Stelle in der url()?
ja, der richtige Standort ist bezeichnet in der url()
Versuchen Sie, nur ein background-color. Könnte es sein, dass dein Panel ist nicht korrekt eingeleitet oder seine Breite / Höhe ist 0. #ff00ff ist ein nützliches debugging-Farbe 😉
Es hat nicht funktioniert....
Dann ist nicht das Problem mit der CSS-Deklaration für das Hintergrundbild, sondern einfach die Maße Ihres Fensters oder die CSS-Deklarationen in Ihrer Gesamtheit. Hast du einen link, dass wir vorbei schauen, da wird es viel einfacher zu Debuggen.

InformationsquelleAutor b.i | 2012-06-13

  1. 1

    Können Sie tun, wie unten

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

        ]
    }

});
    funktioniert nicht....

    InformationsquelleAutor Sagar Modi

  2. 1

    Musste ich den hintergrund des Panels Körper zu transparent, weil sonst weiße hintergrund verhindert mein Bild zu zeigen. Versuchen Sie, diese:

    bodyStyle: 'background: transparent;',

    InformationsquelleAutor janinab42

  3. 1

    Verwenden bodyStyle config

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

    InformationsquelleAutor Joy

  4. 0

    Versuchen, diese @. b.ich und hier gehen wir!,

    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:[]
})

    Erstellen Sie das panel und nach können Sie es verwenden. Versuchen Sie, erstellen Sie Einzel-und sehen Sie Ihre Bild ersten.

    backgroundSize: x y ist die Größe des Bildes und backgroundPosition: x y ist, ist die position des Bildes.

    Ich hoffe Euch helfen. 🙂 Ciao

    funktioniert nicht....
    Zeigen Sie mir, wie Sie tun.
    Ich passe meine Frage an Euch zeigen, was ich Tue.
    Ich setze den style: { background:'#ffffff', backgroundImage: 'url(Pfad/Bild/your_image.PNG)', backgroundSize: '10% 85%', backgroundRepeat: 'no-repeat', backgroundPosition: 'unten Links', } an einer falschen Stelle?
    Ich update meine Antwort @b.ich Etwas lassen Sie mich wissen, oder Sie akzeptieren diese Antwort 🙂

    InformationsquelleAutor hekomobile

Schreibe einen Kommentar