Question

所以，我在Sencha Touch中有一个面板，我有一个图像，我希望将其显示为该面板中的一个组件。我尝试过以下几点：

   logo = {
        xtype: 'component',
        autoEl: {
            src: 'http://addressofmyimage.com/image.png',
            tag: 'img',
            style: { height: 100, width: 100 }
        }
    };

然后在我的面板中添加上面的组件作为项目。没有显示图像。显示我的所有其他组件，但不显示图像。甚至没有破碎的图像链接图标。我无法弄明白......

我宁愿不只是插入原始html，因为我无法按照我的意愿格式化。

Answer 1

使用面板显示图像本身可能会更好。将上面的代码替换为......

logo = {
    xtype: 'panel',
    html: '<img style="height: 100px; width: 100px;" src="http://addressofmyimage.com/image.png" />'
};

Answer 2

您可以覆盖Component的getElConfig方法并返回autoEl对象中的内容。

{
    xtype: 'component',
    getElConfig : function() {
        return {tag: 'img',
        src: 'http://addressofmyimage.com/image.png',
        style: { height: 100, width: 100 },
        id: this.id};
    }
}

在渲染组件以获取底层元素的构成时使用该方法。

Answer 3

您可以使用src.sencha.io API根据需要调整图像大小。下面的例子对我有用。

{
    xtype: 'image',
    src: 'http://src.sencha.io/100/100/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg',
    height: 100
}

您可以找到文档here。

如何在Sencha Touch中显示图像？

3 个答案: