煎茶触摸2覆盖showBy HTML DIV
问题描述:
如何使用这个由div来显示:煎茶触摸2覆盖showBy HTML DIV
的Html
JS码(抽头被连接到上面的div元素)
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());
}
然而,这是一场噩梦,我会用e.getTarget()
或e.target
得到这些错误,它确实与.show()
一起工作,但它的定位是错误的。什么是正确的方法来做到这一点?
Uncaught TypeError: Object #<HTMLTableCellElement> has no method 'getPageBox'
答
您可能想要在您的HTML div标记上使用event delegation。所以,你可以给你的div标签的ID:
<div class='clickable' id='myId'>Tap me</div>
listeners : {
tap: {
fn: function() {},
element: 'element',
delegate: '#myId'
}
}
答
你可以在你的HTML DIV覆盖一种无形的Ext.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);
}
});
}
}
测试和工作。
答
你需要做的是这样的:
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());
}
也就是说,不添加到视口...创建面板来代替。