Hi all.

I've tried to build my own ui control and I've digged through a fairly high number of articles and code examples, but without luck. I hope someone here can point me in the right direction

I've read the tutorial Creating new UI controls using ExtJ and this example on how to implement image maps; all I ever get is div-elements.

Below is a very basic and simple app that do not give me an img-tag as I expect. Can any of you tell me what I am doing wrong in the example below?

 Ext.ux.Image = Ext.extend(Ext.Component, {
            autoEl: {
                tag: 'img',
                src: 'test.jpg',
                cls: 'my-managed-image'

            //  Add our custom processing to the onRender phase.
            //  We add a ‘load’ listener to our element.
            onRender: function () {
                this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
                Ext.ux.Image.superclass.onRender.apply(this, 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;
        Ext.reg('image', Ext.ux.Image);

        new Ext.Application({
            launch: function () {
                new Ext.Panel({
                    fullscreen: true,
                    items: {
                        xtype: 'image',
                        isFormField: true,    // Inform the FormLayout to render as a Field
                        fieldLabel: 'Image',  // The label enabled by the above setting
                        src: 'http://extjs.com/deploy/dev/examples/shared/screens/desktop.gif',
                        qtip: 'Image Tooltip'

The above code renders this Html:

HTML Code:
<div id="ext-comp-1004" class="x-panel x-fullscreen x-landscape" style="width: 1280px; height: 209px; ">
<div class="x-panel-body" id="ext-gen1004" style="width: 1280px; height: 209px; left: 0px; top: 0px; "><div id="ext-comp-1005" class=" x-component">
The div-element
is generated by the xtype

I hope one of you brilliant people have an answer for me.

Best Regards, HKAL