如何在Sencha Touch中顯示圖像？

所以，我在Sencha Touch中有一個面板，我有一個圖像，我想在該面板中顯示爲一個組件。我已經嘗試了幾件事情：如何在Sencha Touch中顯示圖像？

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

然後在面板中添加上述組件作爲項目。沒有圖像顯示。我的所有其他組件都顯示，但不是圖像。甚至沒有一個破碎的圖像鏈接圖標。我不知道這...

我寧願不只是插入原始的HTML，因爲我不能格式化，因爲我希望。

來源

2011-11-14 Groppe

使用面板顯示圖像本身可能更好。將上面的代碼替換爲...

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

來源

2011-11-14 23:38:07 JamesHalsall

你也可以使用** bodyStyle **參數 – heyjii

true，具有background-image css屬性的bodyStyle屬性可以工作 – JamesHalsall

我可以添加一個tap處理事件嗎？ – Ricardo

您可以重寫Component的getElConfig方法並返回autoEl對象中的內容。

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

該方法用於繪製組件以獲取底層元素的組成。

來源

2011-11-15 11:17:25 Stuart

您可以使用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。

來源

2012-04-10 12:50:15

如何在Sencha Touch中顯示圖像？

回答

相關問題