Overlay closes parent

[JeffBurr]

I have a simple floating panel that is sliding in to cover the full screen. On this panel is a link to launch another floating panel which uses "showBy" to popup from a link.

This works well, except that when the secondary panel displays, if you click it, the primary panel slides out and the secondary panel remains! I can't find any event that is firing...

var detailPane = Ext.extend(Ext.Panel, {
    floating: true,
    style: 'top:115px;',
    modal: false,
    scroll: 'vertical',
    floatingCls: 'dtl-floating',
    width: '100%',
    height: 880,
    data: null,
    layout: 'fit',
    dockedItems: [{
       dock: 'top',
       xytpe: 'panel',
       height: 70,
       cls: 'fp-artpop-tool'
    }],
    tpl : [
        '<div class="fp-artpop-head"><div>{title}</div></div>',
        '<div class="fp-artpop-subhead"><div>{subtitle}</div></div>',
        '<div class="fp-artpop-byline"><div>{byline}</div></div>',
        '<div class="fp-artpop-body">',
        '<tpl if="photo != null">',
           '<img src="{photo}" align="left" style="width:400px;margin:0px 0px 0px 0px;">',
        '</tpl>',
        '{body}</div>'
    ],    
    listeners: {
        afterrender: function() {
          if (!this.fakeback) {
            this.fakeback = this.getEl().createChild({
                cls: 'fakeback'
            });
            this.fakeback.setLeft(40);
            this.fakeback.setTop(20);
            
            this.fakeshare = this.getEl().createChild({
                cls: 'fakeshare'
            });
            this.fakeshare.setLeft(520);
            this.fakeshare.setTop(20);
            
            this.fakesave = this.getEl().createChild({
                cls: 'fakesave'
            });
            this.fakesave.setLeft(630);
            this.fakesave.setTop(20);

            this.fakeback.on({
        tap: this.closeme,
                scope: this
            });
            this.fakeshare.on({
        tap: this.showOverlay,                
                scope: this
            });
            
          }            
        }
    },
    closeme: function() {
        this.overlay.hide();
        this.hide('fade');
    },
    showOverlay: function(e, btn) {
        this.overlay.setCentered(false);
        this.overlay.showBy(btn);
    },
    overlay: new Ext.Panel({
        floating: true,
        modal: false,
        centered: false,
        width: 250,
        height: 220,
        styleHtmlContent: true,
        //dockedItems: overlayTb,
        scroll: 'vertical',
        contentEl: 'lipsum',
        cls: 'htmlcontent'
    })
}); 

Any suggestions?

[JeffBurr]

Even though the initial panel is not modal, you apparently need to add

hideOnMaskTap: false,

This seems to solve the behavior.