煎茶觸摸2覆蓋showBy HTML DIV

Question

如何使用這個由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' 

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

也就是說，不添加到視口...創建面板來代替。