ExtJsUI---button---panel--textfield総合インスタンス学習ノート(中央登録フォーム)

実現構想:
 
2つのDIVで実現され、1つ目のDIVが画面全体を埋め尽くし、2つ目の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