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

希望这有帮助

Sencha Touch 2 - 在源按钮旁边放置一个浮动面板

1 个答案: