1

我有这段代码，它创建了一个以屏幕为中心的浮动面板：

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

    ]        
}
});

如您所见，它是一个容器，带有一个按钮，单击该按钮会显示一个浮动面板。如何将浮动面板定位在触发浮​​动面板的按钮的中心？

4

1 回答 1

2

如果我理解正确，您需要像这样使用 showBy 函数：

myPanel.showBy(myButton);

它将在按钮旁边显示面板，您也可以选择对齐方式。

你可以看看文档

如何获得按钮

如果您查看点击侦听器签名：http ://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap

您可以看到第一个参数是按钮本身，所以：

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

希望这可以帮助

于 2012-07-18T14:45:11.583 回答