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());

居中的Panel

<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>