javascript - Sencha Ext 中的 float 图像

Question

我需要使用 extjs 将多个 float 图像放入一个容器中。容器本身应该有一个背景或另一个拉伸(stretch)到它的大小的图像。所有这些图像和背景图像都应该是动态可变的。

我设法通过简单的 Ext.image 对象创建了背景图像，该对象包含在具有 layout : {type: 'vbox', align: 'stretched'} 的容器的元素中。但是我没有在其中添加 float 图像。

我尝试了 floating: true 属性，但它导致没有将元素添加到 dom。 还尝试向 this topic 之后的 float 属性添加属性但没有成功。

进一步阅读 sencha 的文档后发现， float 在 sencha 中的行为不同。它实际上隐藏了元素并通过 ZIndexManager 一次一个地显示它们。这不是我的目标。

有没有其他方法可以让图像漂浮在容器中，同时允许我更改它们在容器中的 src 和位置。

Answer 1

原来诀窍不是让图像 float 而是将容器的布局设置为绝对布局:

layout{
    type: 'absolute'
}

之后只需像这样为每个元素设置 x 和 y 属性:

var img = Ext.create('Ext.Img', {
    src: 'whatever.jpg',
    x: 100,
    y: 100,
});

它们漂浮着。如果您设置百分比字符串，这也有效:'20%'