ExtJsUI ---button ---panel -- textfield 综合实例 学习笔记（居中登录窗体）

实现思路：

 

利用两个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

 

评论

4 楼 BestUpon 2010-03-27  

这不是才学习EXTjs，贴出来，见笑了

3 楼 笨笨狗 2010-03-27  

居中你干嘛不用Viewport配合vbox的layout？囧

2 楼 just4you 2010-03-26  

这个代码很眼熟，楼主也是在verycd上看过教程吗？

1 楼 csfifayujian 2010-03-25  

EXT做出来的东西的确很漂亮，但是我总感觉EXT使用起来总不是得心应手，个人认为还是JQuery比较好