Extjs4 中垂直水平居中

</pre><p>方法一：</p><pre name="code" class="javascript">    想做个登陆框，用一个小formpanel垂直水平居中，而且可以适应浏览器窗口的变化，始终居中。很多文章都是写一个居中的div，然后将panel   render to 这个div中。用纯Extjs的方法怎么实现。谢谢百度知道上网友fastspeeed的指引，使用viewport的自定义布局。viewport的默认布局只有：

<img src="https://img-blog.csdn.net/20150429151408788?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3lhbjk2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

但是在ux扩展包中还有个布局 Ext.ux.layout.center 。一开始居然没找到ux这个文件夹，最后在ext4.2的examples文件夹下找到ux，然后拷贝到src目录下，require： ‘Ext.ux.layout.center’，就可以实现完美居中了。examples中的layout-browser实例也演示了这个布局的使用。

<pre name="code" class="javascript">Ext.define('AM.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    requires: [
        'Ext.form.Panel',
        'Ext.form.field.Text',
        'Ext.button.Button',
        'Ext.ux.layout.Center'//加载这个center布局类
    ],
   
    layout:'ux.center',//使用布局 

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    frame: true,
                    height: '50%',// panel的宽高使用百分比
                    itemId: 'xform',
                    width: '50%',
                    layout: 'auto',
                    bodyPadding: 10,
                    title: 'XML Form',
                    fieldDefaults: {
                        labelAlign: 'right',
                        labelWidth: 75,
                        msgTarget: 'side'
                    },
                    waitMsgTarget: true,
                    items: [
                        {
                            xtype: 'textfield',
                            width: 280,
                            fieldLabel: 'id',
                            name: 'id'
                        },
                        {
                            xtype: 'textfield',
                            width: 280,
                            fieldLabel: 'name',
                            name: 'name'
                        },
                        {
                            xtype: 'textfield',
                            width: 280,
                            fieldLabel: 'email',
                            name: 'email'
                        },
                        {
                            xtype: 'textfield',
                            width: 280,
                            fieldLabel: 'sex',
                            name: 'sex'
                        },
                        {
                            xtype: 'textfield',
                            width: 280,
                            fieldLabel: 'age',
                            name: 'age'
                        },
                        {
                            xtype: 'button',
                            itemId: 'load',
                            text: '载入数据'
                        },
                        {
                            xtype: 'button',
                            formBind: true,
                            disabled: true,
                            text: '提交数据'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

效果：

方法二

    这个方法是学习Extjs的布局范例的时候发现的。使用hbox布局可以实现垂直水平居中，比方法一要简单好用，不知道方法一和方法二具体使用起来会有什么区别。

关键代码是在viewport的layout中这样设置就可以了：

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