In one of my tabs I have rendered a DIV with some image tiles and I make them draggable just like google and load more tiles at runtime using the mouse events.

Now I have another transparent image that I need to overlay (absolute positioned + higher z-index) on top of this div/images.

The problem is because the transparent image is overlayed on top of a portion of the underlayed image tiles, the mouse events over the transparent image needs to be relayed to the elements underneath.

Now because only objects derived from Ext.util.Observable are accepted as objects to relay events to, I have derived the extEl (see in code) from Observable but I am still getting the error :

observable.fireEvent is not a function
observable.fireEvent(eventName, e);
My code is as follows :

        this.availableWidth = this.ownerTab.getSize().width - 100;
        this.availableHeight = this.ownerTab.getSize().height - 50;
        this.setTileWidth(Math.round(this.availableWidth / this.tilesToDisplay));
        this.setTileHeight(this.availableHeight);

        var overlayedImg = this.dh.overwrite(this.ownerTab.body, {
            tag: 'img',
            style: 'position:absolute;left:0;top:0;z-index:100000',
            src: this.url
        }, true);

        this.overlayedImg = overlayedImg;

        var extEl = this.dh.append(this.ownerTab.body, {
            tag: 'div',
            style: 'overflow:hidden;margin:0 0 1em 100px;position:relative;',
            children: this.getTileUrls(today, this.tilesToRender)
        }, true);
    

        Ext.extend(extEl, Ext.util.Observable);

        this.innerDiv = extEl;

        this.lastChildInitOffset = this.innerDiv.dom.lastChild.offsetLeft;

        extEl.on('mouseover', function(e) {
            this.addClass('movable');
        });

        this.overlayedImg.relayEvent('mouseover', extEl); // gives error

        extEl.on('mousedown', function(e) { this.startMove(e); }, this);
        extEl.on('mousemove', function(e) { this.processMove(e); }, this);
        extEl.on('mouseup', function(e) { this.stopMove(e); }, this);
        extEl.on('mouseout', function(e) { this.stopMove(e); }, this);