</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'
},