到目前为止,我已设法创建两个工具栏,其中一个图像位于其中一个:
Ext.define('bla.bla.bla.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
header: false,
id:'main',
layout: 'border',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype:'label',
html: '<img src="/resources/img/myImage.png" width="60" height="60">',
},{......}
]
},
{
xtype: 'toolbar',
dock: 'top',
style: {backgroundColor: 'green'},
items: [{
text: 'Home'),
},{....}
]
}
],
items: [{ // Panel central
xtype: 'centerPanel',
id: 'center-panel',
region: 'center',
layout: 'fit'
},{ // Pie
xtype: 'footer',
id: 'footer',
region: 'south'
}]
});
但每当我尝试按下图像,更改CSS的 top 或 margin-top 属性时,它就会在第二个工具栏下呈现。我也试过 z-index ,但没有结果。
¿无论如何要做到这一点?
答案 0 :(得分:0)
您可以创建一个图像dom元素并将其放置在您想要的位置。
//render image\
var style = "position: absolute;top: 10px;left: 10px;z-index: 99999;",
href = "https://www.sencha.com/forum/sencha-assets/css/images/logo.svg";
Ext.getBody().appendChild(Ext.DomHelper.createDom('<img id="image" style="' + style + '" src="' + href + '" height="60px" />'));
当然,您应该将它放在主面板上的 后续监听器 中。
请参阅fiddle。