Sencha Touchで画像を表示するにはどうすればよいですか？

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

コンポーネントの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があります。