煎茶觸摸2 - 旁源按鈕位置的浮動面板

Question

我有此代碼它創建中心到屏幕浮動面板：

Ext.define('myapp.view.ButtonNav', { 
extend: 'Ext.Container', 
xtype: 'myapp_buttonnav', 
config: { 
    fullscreen: false, 
    layout: 'hbox', 
    items: [ 
     { 
      xtype: 'button', 
      text: 'Button 1', 
      listeners: { 
       tap: function() { 
        var panel = Ext.Viewport.add({ 
         xtype: 'panel', 
         defaultType: 'button', 
         baseCls: 'btn1_cont', 
         centered: true, 
         layout: { 
          type: 'vbox', 
          align: 'center', 
          pack: 'center' 
         }, 
         items: [ 
          { 
           baseCls: 'btn1', 
           text: 'HOME PAGE', 
           handler: function() { 
            Ext.Viewport.setActiveItem({ 
             xtype: 'myapp_homepage' 
            }); 
            panel.destroy(); 
           } 
          } 
         ], 
         top: // SET TOP TO SOURCE BUTTON 
         left: // SET LEFT TO SOURCE BUTTON 
        }); 
       } 
      } 
     }, 

    ]   
} 
}); 

正如你可以看到，它是一個容器，具有一個按鈕，用於點擊時顯示浮動面板。 如何將浮動面板定位在觸發浮​​動面板的按鈕的中心位置？

Answer 1

如果我理解正確的話，你需要使用showBy功能，像這樣：

myPanel.showBy(myButton); 

它會顯示旁邊的按鈕面板，您可以選擇對齊方式爲好。

You can take a look at the documentation

如何獲得按鈕

如果你看看水龍頭聽衆簽名：http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap

你可以看到，第一個參數是按鈕本身這樣：

listeners: { 
    tap: function (myButton, myEvent) { 
    ... // create your panel 
    myPanel.showBy(myButton); 
    } 
} 

希望這會有所幫助