EXT UIのPanelとformフォームのいくつかのノート

BUTTONを生成し、生成したオブジェクトをdocument.body中

	Ext.onReady(function(){
		var button = new Ext.Button({
			renderTo:document.body,
			text:"OK!",
			minWidth:200,
			handler:function(){
				alert("click");
			},
			listeners:{
				"click":function(){
				alert("click2");
				}
			}
		})
	});

alert(button.text);
button.setText("Canel");

button.on("click", function(){
			alert("click 3, ");
		})

Ext.layout.FormLayoutレイアウトでは、テキストボックスのラベル名が正しく表示されます.
レイアウトのホストはExt.Containerでなければなりません

		var panel = new Ext.Panel({
			renderTo:Ext.getBody(),
			layout:"form",
			labelWidth:50,
			
			listeners:
			{
				// 
				"render":function(panel){
					panel.add(new Ext.form.TextField({
						id:"txt_name",
						fieldLabel:" "
					}))
				}
			}
		
		})
		
		new Ext.Button({
			text:" ",
			renderTo:Ext.getBody(),
			handler:function(){
				alert(Ext.getCmp("txt_name").getValue());
			}
		})

ボタンを追加し、上との違いに注意します.前もってrenderできない

var panel = new Ext.Panel({
			//renderTo:Ext.getBody(),
			layout:"form",
			labelWidth:50,
			title:" ",
			width:300,
			height:500,
			listeners:
			{
				//  ( )
				"render":function(panel){
					panel.add(new Ext.form.TextField({
						id:"txt_name",
						fieldLabel:" "
					}))
					
				}
			}
		
		})
		// 
		panel.addButton( {text:"save"} );
		panel.render(Ext.getBody());

真ん中のパネル

<style type="text/css">
	.contain{
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	
	.center{
		position:absolute;
		top:30%;
		left:43%;
		text-align:left;
	}
</style>

<script type="text/javascript">
	Ext.onReady(function(){
		var panel = new Ext.Panel({
			title:" ",
			frame:true,
			width:200,
			height:300,
			layout:"form",
			listeners:{
				"render":function(panel){
					panel.add( {xtype:"textfield", fieldLabel:" "} );
					panel.add( {xtype:"textfield", fieldLabel:" "} );
					panel.add( { fieldLabel: 'Num', xtype: 'numberfield' } );
				}
			}
		});
		
		
		panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
			tag:"div", // div
			cls:"contain", //  class
			cn:[{
				tag:"div", // 
				cls:"center"
			}]
		},true // ext 
		
		).child("div"));
		//panel.render(Ext.getBody());
	//onReady end
	});
	
</script>