Блог

Я хочу открыть окно панели под кнопкой, которую я нажимаю, которая находится в заголовке. Панель должна отображаться под кнопкой (выровнена по заголовку): я пытаюсь :

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

    }
  

Но приведенный выше код отображает панель в середине экрана как модальную, которая мне не нужна (как я уже сказал, я хочу ее прямо под заголовком)
Итак, как этого добиться?
Спасибо.

Я взял ответ Музаффера за основу и добавил функцию для использования здесь координат событий:

  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/3a8jamp;view/editor

Это полезно для вас?

 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