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?


Code:
 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">
</div>
</div>
</div>
The div-element
Code:
ext-comp-1005
is generated by the xtype
Code:
image
.

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

Best Regards, HKAL