如何在按钮单击时打开面板答案

【问题标题】：How to open a Panel on Button click如何在按钮单击时打开面板
【发布时间】：2020-11-17 00:32:10
【问题描述】：

我想在我单击的位于标题中的按钮下打开一个面板窗口。面板应显示在按钮下方（与标题对齐）：我尝试：

{
            xtype:'button',
            height: '100%',
            text: Strings.Notifications,
            glyph: 'xf142@FontAwesome',
            reference: 'settingsNotificationsButton',
            cls :'headerButtonsCls',
             listeners: {
                    click: function () {
                        new Ext.form.Panel({
                            width: 200,
                            height: 200,
                            title: 'Foo',
                            floating: true,
                            closable: false
                        }).show();
                    }
                }

    }

但上面的代码将屏幕中间的面板显示为我不想要的模式（正如我所说的，我希望它在标题下方）那么如何实现呢？谢谢。

【问题讨论】：

标签： extjs extjs5

【解决方案1】：

我以 Muzaffers 的回答为基础，并在此处添加了使用事件坐标的功能：

 var windowPanel = Ext.create('Ext.Panel', {
     bodyStyle: 'background: #ffff00;',
     border: true,
     height: 200,
     width: 200,
    floating:true
 });
 Ext.create('Ext.Container', {
     renderTo: Ext.getBody(),
     items: [{
             xtype: 'button',
             text: 'Show/Hide Panel',
             handler: function (btn, event) {
                 windowPanel.showAt(event.getXY())
             }
         }
     ]
 });

这里是小提琴：https://fiddle.sencha.com/#fiddle/3a8j&view/editor

【讨论】：

是的，我已经知道了！尽管我使用了目标来区分回调函数中的事件和目标参数

【解决方案2】：

这对你有用吗？

var windowPanel = Ext.create('Ext.Panel', {
     bodyStyle: 'background: #ffff00;',
     border: true,
     height: 200,
     width: 200,
     hidden: true
 });
 Ext.create('Ext.Container', {
     renderTo: Ext.getBody(),
     items: [{
             xtype: 'button',
             text: 'Show/Hide Panel',
             handler: function () {
                 if (windowPanel.isHidden()) {
                     windowPanel.show();
                 } else {
                     windowPanel.hide();
                 }
             }
         },
         windowPanel
     ]
 });

https://fiddle.sencha.com/#fiddle/3a8c

【讨论】：

谢谢，但我希望有一个基于点击坐标的解决方案，让面板显示在标题按钮下。
您可以使用windowPanel 对象的x:150 和y:250 属性。或者更好的是，您可以创建一个小提琴样本来澄清它。
点击事件有一个事件参数。 docs.sencha.com/extjs/6.5.3/classic/…。在该事件中，您可以调用 getXY。 docs.sencha.com/extjs/6.5.3/classic/…。您可以使用 showAt 代替 show。