1、用ext代码往页面中加元素：

?

	Ext.onReady(function(){ //onReady表示在页面加载时运行里面的函数
	
		var _button = new Ext.Button({
					renderTo:document.body, //或者Ext.getBody()
					text:"确 定",
					minWidth:100
			}) ;
		
	}) ;

?

?renderTo：将当前对象所生成的HTML对象存放进指定的对象中。

?

2、为加入的元素加上函数响应

?

	Ext.onReady(function(){
	
		new Ext.Button({
					renderTo:Ext.getBody(),
					text:"确 定",
					listeners:{ //加上事件监听器
						
						"click":function(){ //为click事件添加响应
							
							alert("欢迎访问凌云壮志的博客！") ;
						}
					}
			}) ;
		
	}) ;

?

?也可以先new，再在后面加事件响应

?

	Ext.onReady(function(){
	
		var _btn = new Ext.Button({
					renderTo:Ext.getBody(),
					text:"确 定"
			}) ;
			
		_btn.on("click" , function(){
								
								alert("欢迎访问凌云壮志的博客！") ;
						  }) ;
		
	}) ;

?

?

3、用handler实现事件添加

?

	Ext.onReady(function(){
	
		new Ext.Button({
					renderTo:Ext.getBody(),
					text:"确 定",
					handler:function(){
						
						alert("欢迎访问凌云壮志的博客！") ;
					}
			}) ;
		
	}) ;

?

?

用listener和handler方法都可以添加事件，主要差别是：

handler：指定一个函数句柄，在默认事件触发时调用，此时的默认事件为click

listener：这个是在对象初始化之前，就将一系列的事件进行定义的手段，在进行组件化编程时，特别有用。

?

4、添加文本框：Ext.form.TextField

?

		new Ext.form.TextField({
				renderTo:Ext.getBody(),
				fieldLabel:"姓名"
			}) ;

?

5、Panel：

下面试着把文本框加入到Panel里面去

?

		var _panel = new Ext.Panel({
						renderTo:Ext.getBody(),
						layout:"form",
						labelWidth:30,
						listeners:{
							"render":function(_panel){ //当绑定的时候就触发这个事件，相当于直接添加
										_panel.add(new Ext.form.TextField({
													id:"txt_name",
													fieldLabel:"姓名"
												})) ;
									 }
						}}) ;

?

?其中有个layout属性，用来布局。主要有如下几个：

?

?