ExtJS学习笔记三：简单组件

------------

创建一个按钮

------------

Ext.onReady(function(){
//api中的Config Options是写在底下的，而不能直接设置值得，公有的才可以即Public Properties
var button = new Ext.Button({
renderTo:Ext.getBody(),//将当前生成的指定的html对象存放到指定对象中(这里是body容器（元素）)
text:"确定",
minWidth:200,//不知道为什么不起作用
//指定默认的click事件的函数句柄
/* handler:function(){
alert("你点击了这个按钮");
} */
listeners:{
"click" : function(){
alert("你点击了这个按钮1");
}
}

});

//alert(button.text);//text属性用来获取按钮上边的值
//button.setText("取消");//text属性是read only 所以不能直接用属性
//button.minWidth(200);//这个是错误的

});

-------------------

--文本框的创建

--------------------

<script type='text/javascript'>
	Ext.onReady(function() {
		//TextField,放在Ext.form里面，所有组件必须使用布局，否则无法正常显示

		var panel = new Ext.Panel({
			renderTo : Ext.getBody(),
			layout : "form",
			//pannel是没有labelWidth属性的---呵呵
			labelWidth : 30,//这个是form布局的属性，有点难理解
			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.get("txt_name").getValue());//这个是获取的Element对象哦
				alert(Ext.getCmp("txt_name").getValue());//这个是获取的组件对象
			}
		});
	});
</script>

--------

创建panel；

---------

<style type="text/css">
*{
margin:0;
padding:0;
}
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center{
width:300px;
height:400px;
margin:20% auto;
}
</style>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type='text/javascript'>
Ext.onReady(function() {
var panel = new Ext.Panel({
//始终要记住，要想显示你创建的组件，第一要穿件组件，第二要显示
//renderTo:Ext.getBody(),
title:"人员信息",
frame:true,//直角变成圆角，还有其他变化
height:300,
width:400,
layout:"form",
listeners:{
"render":function(panel){
//add方法是运行时方法，只有panel确实存在了
//xtype是一种机制：通过制定xtype即告诉容器怎么初始化所包含组件
//Component有对照表，可以查找
panel.add({xtype:"textfield",fieldLabel  :"姓名"});
panel.add(new Ext.form.TextField({
fieldLabel:"地址"
}));
}
}
});
//addButton是一个设计时方法，即在panel没有显示时使用
panel.addButton({text:"确定"});//这个对象是有form创建，按钮归form管理
panel.addButton(new Ext.Button({//这个就自己去管理了
text:"取消",
minWidth:100
}));
//panel.render(Ext.getBody());
//renderTo是想容器中注入
//applyTo直接赋给对象属性
//applyToMarkup和render方法是对应的
//但是没有applyToMarkup事件
//动态创建html标签的一种方法
panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{//我理解的时child-node
tag:"div",
cls:"center"
}]
//true代表返回的时Ext的元素
},true).child("div"));
});
</script>