实现思路:
利用两个DIV 实现的,第一个DIV占满整个屏幕,第二个DIV 居中,panel放置在DIV(child -div 中),可以得到登录窗口居中的效果。
div 居中的css样式:
.contain{
width:100%;
height: 100%;
top:0;
left:0;
}
.centerScreen{
position: absolute;
top:30%;
left:25%;
text-align: left;
}
JS 代码:
Ext.onReady(function() {
var _panel = new Ext.Panel({
layout : "form",
frame : true,
labelWidth:45,
title : "用户登录",
width : 260,
height : 130,
defaults : {
xtype : "textfield",
width : 180
},
items : [{
fieldLabel : "姓名"
}, {
fieldLabel : "密码"
}],
buttons : [{
text : "确 定"
}, {
text : "取 消"
}]
});
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
tag : "div",
cls : "contain",
cn : [{
tag : "div",
cls : "centerScreen"
}]
}, true).child("div"));
});
效果:http://dl.iteye.com/upload/attachment/222193/8216a80a-9488-390c-b797-eb2f5713e528.png