Question

I need a real <img> HTML tag in my view Sencha.

I’ve retrieved this code from the official doc :

Ext.define('Ext.ux.Image', {
    extend: 'Ext.Component', // subclass Ext.Component
    alias: 'widget.managedimage', // this component will have an xtype of 'managedimage'
    autoEl: {
        tag: 'img',
        src: Ext.BLANK_IMAGE_URL,
        cls: 'my-managed-image'
    },

    // Add custom processing to the onRender phase.
    // Add a ‘load’ listener to the element.
    onRender: function() {
        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
        this.callParent(arguments);
        this.el.on('load', this.onLoad, this);
    },

    onLoad: function() {
        this.fireEvent('load', this);
    },

    setSrc: function(src) {
        if (this.rendered) {
            this.el.dom.src = src;
        } else {
            this.src = src;
        }
    },

    getSrc: function(src) {
        return this.el.dom.src || this.src;
    }
});

When i try to do setSrc, I get this error : Cannot read property ‘dom’ of undefined

Answer 1

Your code is from Ext.Js 4.x docs. You should use sencha touch 2 docs.
Please compare:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component

and

http://docs.sencha.com/touch/2-0/#!/api/Ext.Component

They are different.

As i understand you need real < img > tag in your view. If you use Ext.Img it will create a div container with background-image.
I know two ways:

1. set up tpl and data property.

Ext.create('Ext.Component', {
  config: {
    tpl: '',
    data: {
      url: 'http://example.com/pics/1.png',
      imgClass: 'my-class'
    }
  }
});

1. set html config.

Ext.create('Ext.Component', {
    config: {
    html: ' <img class="my-class" src="http://example.com/pics/1.png">'
    }
});