All geek questions in one place

How to display image in Sencha Touch?

So, I have a panel in Sencha Touch, and I have an image that I want to display as a component on that panel. I tried several things line by line:

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

Then adding the above component as an element in my panel. Image is not displayed. All my other components are displayed, but not the image. Even the icon with a disabled image. I can't figure it out ...

I would rather not just embed raw html, as I cannot format it as I wish.

+4
source share
3 answers

It might be better to use the panel to display the image itself. Replace the above code with ...

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

You can override the Component getElConfig method and return what you have in your autoEl object.

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

This method is used when a component is visualized to make up the base element.

+4
source

You can use the src.sencha.io API to resize the image as you wish. The above example works for me.

 { 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 }

You can find the documentation here .

+3
source

Source: https://habr.com/ru/post/1381204/

More articles:


All Articles