Since I could not find a solution, I decided to make one.
First, you will need to edit some Sencha code. Search for the onFloatingTouchStart function in the code and change it as such (add the red part):
Code:
onFloatingTouchStart: function(e) { if (this.hideOnMaskTap && !this.el.contains(e.target)) {
this.hide();
if (this.stopMaskTapEvent || Ext.fly(e.target).hasCls('x-mask')) {
e.stopEvent();
}
}
},
Next, when you display your second sheet, set your first sheet's hideOnMaskTap property to false.
Finally, add a listener to the hide event of your second sheet to reset your parent sheet's hideOnMaskTap property to true.
And that should do it!
The only issue I found with this solution is that that mask does not get applied over the first sheet when showing the second sheet, and when you dismiss the second sheet, the first sheet's mask gets removed.
I would hope that Sencha apply this functionality behind the scenes in the future, but for now this will get you by. If anyone has a cleaner solution (one that doesn't require modifying the Sencha code) please share.