Sencha Touch 2 overlay showBy html div - sencha-touch-2

Question

How can I use this to show by a div:
Html
<div class='clickable'>Tap me</div>
JS code (tap is connected to the div element above)
tap : function(e) {
overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(e.getTarget());
}
However this is a nightmare, I'll get these errors with e.getTarget() or e.target, it does work with .show() but its positioning is then wrong. What is the correct way to do this?
Uncaught TypeError: Object #<HTMLTableCellElement> has no method 'getPageBox'

Answer 1

You probably want to use event delegation on your HTML div tag. So you can give your div tag an id:
<div class='clickable' id='myId'>Tap me</div>
listeners : {
tap: {
fn: function() {},
element: 'element',
delegate: '#myId'
}
}

Answer 2

You can hack it by overlaying an invisible Ext.Button over your html div! You'll just have to add a painted function to render the new button...
tpl: '<div class='clickable'>Tap me</div>'
.......
listeners: {
painted : function(){
var clickable = Ext.DomQuery.select('.pageClass .clickable')[0];
var invisibleButton = new Ext.Button({
text: 'whatever',
renderTo: clickable,
cls: 'something',
width: '100%',
// set styles as transparent bg, no border etc...
handler: function(){
var overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(this);
}
});
}
}
Tested and working.

Answer 3

You need to do it like this:
tap : function(e) {
var overlay = Ext.create('Ext.Panel', {
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(e.getTarget());
}
That is to say, do not add to viewport ... create the panel instead.