centering custom define floating panel sencha touch 2

Question

This code work perfectly the panel is floating center of the screen,

 Ext.Viewport.add({
      xtype: 'panel',
      layout: 'vbox',
      flex: 1,
      modal: true,
      centered: true,
      floating: true,
      ...
 });

then I try to make this code to be an sencha object for easily to reuse.

 Ext.Viewport.add(Ext.create('Ext.Dialog'));

This is my custom code for the Dialog. which is config the same as the above code

 Ext.define('Ext.Dialog', {
      extend: 'Ext.Panel',
      ...
      config: {
          ...
          layout: 'vbox',
          flex: 1,
          modal: true,
          floating: true,
          centered: true,
          ...
      }
 });

the custom code is not centered on the screen. I console the variable the flag 'centered' is still false.

I want to know that, Is it possible the add to viewport with specific position? like dialog show on the buttons position.

I find out that this can be done by styling it outside the sencha code(using css). But still want to know how it can be config with sencha

Thank you in advance

Answer 1

You can use the showBy method if you want to show a component by another component like show your dialog by tapping a button:

dialog.showBy(button);

The showBy method take two argument which is your component and the specific position you want your component to be aligned.

More information from Sencha docs