煎茶：設置圖像作爲背景面板

編輯

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

});

但沒有任何顯示。該怎麼辦？任何幫助表示讚賞。

來源

2012-06-13 b.i

你確定你是在'網址（）'引用正確的位置？ – BenM

是的，正確的位置是在URL引用（） –

嘗試設置只有'背景color'。這可能是你的面板沒有正確啓動，或者它的高度/寬度爲0'＃ff00ff'是一個有用的調試顏色;-) – BenM

試試這個@ 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是圖像的位置。

我希望幫助你。 :)僑

來源

2012-06-13 17:28:35 hekomobile

不工作.... –

告訴我你是怎麼做的。 – hekomobile

我會編輯我的問題，告訴你我在做什麼。 –

可以

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-14 11:36:12

不工作.... –

我不得不面板主體的背景設置爲透明的，否則是白色背景，從顯示阻止我的形象做的波紋管。嘗試添加此：

bodyStyle: 'background: transparent;',

來源

2015-04-20 08:18:09 janinab42

使用bodyStyle配置

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

來源

2016-12-08 13:29:23 Joy

煎茶：設置圖像作爲背景面板

回答

相關問題