0

我怎样才能用它来显示一个div：

html

<div class='clickable'>Tap me</div>

JS代码（tap连接到上面的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()or得到这些错误e.target，它确实可以工作，.show()但它的定位是错误的。这样做的正确方法是什么？

Uncaught TypeError: Object #<HTMLTableCellElement> has no method 'getPageBox'
4

3 回答 3

0

您可能希望在 HTML div 标签上使用事件委托。所以你可以给你的 div 标签一个 id：

<div class='clickable' id='myId'>Tap me</div>

listeners : {
    tap: {
        fn: function() {},
        element: 'element',
        delegate: '#myId'
    }
}
于 2013-02-09T05:25:03.537 回答
0

你需要这样做：

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());
}

也就是说，不要添加到视口...而是创建面板。

于 2014-06-06T00:53:00.817 回答
0

您可以通过在您的 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);
                    }
                });
            }
        }

测试和工作。

于 2013-11-06T23:13:25.137 回答