2

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

});

しかし、何も表示されません。何をすべきか？どんな助けでも大歓迎です。

4

4 に答える 4

1

パネル本体の背景を透明に設定する必要がありました。そうしないと、白い背景が原因で画像が表示されませんでした。これを追加してみてください：

bodyStyle: 'background: transparent;',
于 2015-04-20T08:18:09.280 に答える
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'},

        ]
    }

});
于 2012-06-14T11:36:12.700 に答える
1

bodyStyle設定を使用

Ext.create('Ext.panel.Panel', {
        border: false,
        bodyStyle: {
        'background': 'url(wall.jpg) !important'
         }
        //another config
        ....
    })
于 2016-12-08T13:29:23.330 に答える
0

この @bi を試してみてください。

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位置です。

お役に立てれば幸いです。:)チャオ

于 2012-06-13T17:28:35.693 に答える