Overlay click-through problem

Solution found: http://www.vinylfox.com/forwarding-mouse-events-through-layers/

by dipish

HTML

<button onclick="showOverlay()">Show overlay</button><br />
*To hide overlay simply click on it<br /><br />

<div id="item_container">
    <div class="itm">Item 1</div>
    <div class="itm">Item 2</div>
    <div class="itm">Item 3</div>
    <div class="itm">Item 4</div>
</div>
<div id="overlay">
</div>

CSS

#item_container {
    width: 200px;
    height: 250px;
    background: #fdfdfd;
    border: solid 2px black;
    margin: 0 auto;
}

.itm {
    width: 95%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #ebebeb;
    margin: 10px auto 10px auto;
}

#overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(150, 150, 220, 0.3);
}

JavaScript

overlay = Ext.get('overlay').setVisibilityMode(Ext.Element.DISPLAY).hide();

overlay.on('click', function() {
    this.hide();
    // HERE I WANT TO ALSO EMULATE CLICK ON ITEM CONTAINER
    // HOW CAN THIS BE DONE?
});

window.showOverlay = function() {
    Ext.fly('overlay').show();
}

Ext.get('item_container').on('click',
     function(e, t) {
         var item = e.getTarget('.itm');
         if(item) {
             alert('Action for ' + item.innerHTML);
         }
});