Question

我如何使用它来显示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()或e.target时遇到这些错误，它会与.show()一起使用，但其定位是错误的。这样做的正确方法是什么？

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

Answer 1

您可能希望在HTML div标记上使用event delegation。所以你可以给你的div标签一个id：

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

listeners : {
    tap: {
        fn: function() {},
        element: 'element',
        delegate: '#myId'
    }
}

Answer 2

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

经过测试和工作。

Answer 3

你需要这样做：

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

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

Sencha Touch 2叠加showBy html div

3 个答案: