Center a Form Panel in the screen

Question

There is a form panel, and it acts like a container. Then i have another form panel, where i am adding a textfield and a button. I need this form panel to be in the center of the screen. And the button bottom of the textbox (I should be able to position it where ever in the form. Like Absolute layout).

My code is as follows; and it doesn't work the way i want it to. can some one look into this

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.form.Panel',
    alias: 'widget.myview',
    frame: true,
    height: 800,
    hidden: false,
    hideMode: 'visibility',
    id: 'myviewid',
    autoScroll: false,
    bodyPadding: 5,

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'form',
                height: 330,
                width: 400,
                layout: {
                    type: 'absolute'
                },
                bodyPadding: 10,
                title: 'Care Fusion User Login',
                anchor: '250 250',
                items: [{
                    xtype: 'textfield',
                    id: 'name',
                    width: 233,
                    name: 'name',
                    fieldLabel: 'Nmae',
                    growMax: 200,
                    x: 10,
                    y: 30
                } {
                    xtype: 'button',
                    height: 30,
                    width: 256,
                    text: 'Click',
                    x: 240,
                    y: 110
                }]
            }]
        });

        me.callParent(arguments);
    }

});

Answer 1

Try to use following layout in your outer container:

layout: {
  align: 'middle',
  pack: 'center',
  type: 'hbox'
},

then you inner form will be placed in the center of this outer form.