Extjs4 中垂直水平居中

来源：互联网发布：淘宝怎么样找货源编辑：程序博客网时间：2024/05/19 22:52

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

<img src="http://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'    },

0 0