开始ExtJS

1、获得ExtJS
要使用ExtJS，那么首先要得到ExtJS 库文件，该框架是一个开源的，可以直接从官方
网站下载，网址http://extjs.com/download

把下载得到的ZIP 压缩文件解
压缩到本地磁盘目录如下：
adapter：负责将里面提供第三方底层库（包括Ext 自带的底层库）映射为Ext 所支持
的底层库。
build： 压缩后的ext 全部源码(里面分类存放)。
docs： API 帮助文档。
exmaples：提供使用ExtJs 技术做出的小实例。
resources：Ext UI 资源文件目录，如CSS、图片文件都存放在这里面。
source： 无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的
协议。
Ext-all.js：压缩后的Ext 全部源码。
ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。
ext-core.js：压缩后的Ext 的核心组件，包括sources/core 下的所有类。
ext-core-debug.js：无压缩Ext 的核心组件，包括sources/core 下的所有类。

2、应用ExtJS
应用extjs 需要在页面中引入extjs 的样式及extjs 库文件，样式文件为resources/css/extall.
css，extjs 的js 库文件主要包含两个，adapter/ext/ext-base.js 及ext-all.js，其中ext-base.js
表示框架基础库，ext-all.js 是extjs 的核心库。adapter 表示适配器，也就是说可以有多种适
配器， 因此， 可以把adapter/ext/ext-base.js 换成adapter/jquery/ext-jquery-adapter.js ， 或
adapter/prototype/ext-prototype-adapter.js 等。因此，要使用ExtJS 框架的页面中一般包括下面
几句：

引用

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，因此
可以用，一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的，使用ExtJS 应用程序的代码大致如下：

<script>
function fn()
{
alert('ExtJS库已加');
}
Ext.onReady(fn);
</script>

fn 也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：

<script>
function fn()
{
    alert('ExtJS库已加');
}
Ext.onReady(function(){
	alert('ExtJS库已加');	
});
</script>

3、ExtJS版的HelloWorld
下面我们写一个最简单的ExtJS 应用，在hello.html 文件中输入下面的代码：

<script>
Ext.onReady(function(){
	Ext.MessageBox.alert("hello","Hello,easyjf open source");
	var win=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
	win.show();
});
</script>

4、Ext框架基础及核心简介
ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中通
过javascript 调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成：
底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询
器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的
core 子目录中，包括DomHelper.js、Element.js 等文件
控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、
表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控
件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中
实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON
数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功
能

5、Ext的组件
Ext2.0 对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组
件体系，由这些组件形成了Ext 的控件，Ext 组件是由Component 类定义，每一种组件都有
一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组
件。
组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。
基本组件有：
xtype Class
box Ext.BoxComponent 具有边框属性的组件
Button Ext.Button 按钮
colorpalette Ext.ColorPalette 调色板
component Ext.Component 组件
container Ext.Container 容器
cycle Ext.CycleButton
dataview Ext.DataView 数据显示视图
datepicker Ext.DatePicker 日期选择面板
editor Ext.Editor 编辑器
editorgrid Ext.grid.EditorGridPanel 可编辑的表格
grid Ext.grid.GridPanel 表格
paging Ext.PagingToolbar 工具栏中的间隔
panel Ext.Panel 面板
progress Ext.ProgressBar 进度条
splitbutton Ext.SplitButton 可分裂的按钮
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树
viewport Ext.ViewPort 视图
window Ext.Window 窗口
工具栏组件有
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 按钮
tbfill Ext.Toolbar.Fill 文件
tbitem Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem 工具栏文本项
表单及字段组件包含
form Ext.FormPanel Form 面板
checkbox Ext.form.Checkbox checkbox 录入框
combo Ext.form.ComboBox combo 选择项
datefield Ext.form.DateField 日期选择项
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor html 编辑器
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 区域文本框
textfield Ext.form.TextField 表单文本框
timefield Ext.form.TimeField 时间录入项
trigger Ext.form.TriggerField 触发录入项

6、组件的使用
组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，
创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构
造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性
及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：

<script>
Ext.onReady(function(){	
	var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
	var panel=new Ext.Panel(obj); panel.render("hello");
	
	var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
	      Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});
	panel.render("hello");
});
</script>

引用

<div id="hello">&nbsp;</div>

7、组件的配置属性
在ExtJS 中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造
函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。

8、Extjs组件的事件处理
ExtJS 提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监
控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由
Ext.EventManager 对象管理，与浏览器W3C 标准事件对象Event 相对应，Ext 封装了一个
Ext.EventObject 事件对象。支持事件处理的类(或接口)为Ext.util.Observable，凡是继承该类
的组件或类都支持往对象中添加事件处理及响应功能。

<script>
function a()
{
alert('some thing');
}
window.onload=function(){
document.getElementById("btnAlert").onclick=a;
}
Ext.onReady(function(){
	Ext.get("btnAlert").addListener("click",a);
	Ext.get("btnAlert").on("click",a);  //addLinster 方法的另外一个简写形式是on
	Ext.get("btnAlert").on("click",a,this,{delay:2000}); //事件延迟处理或事件处理缓存
	
	var win=new Ext.Window({
		title:"不能关闭的窗口", height:200, width:300
		});
		win.on("beforedestroy",function(obj){
		alert("想关闭我，这是不可能的!");
		obj.show();
		return true;   //在窗口对象的beforedestroy 事件响应函数返回值为false，因此执行这段程序，你会发现这个窗口将无法关闭
		});
		win.show();
		
		var win=new Ext.Window({
			title:"不能关闭的窗口",
			height:200, width:300,
			listeners:{"beforedestroy":function(obj){
			alert("想关闭我，这是不可能的!");
			obj.show(); 
			return false;
			}}
			});
		win.show();
});
</script>

引用

<input id="btnAlert" type="button" value="alert框" />

9、Panel
面板Panel 是ExtJS 控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大
多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同
组织方式形成。
面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、
面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重
用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本
身是一个容器，他里面又可以包含各种其它组件。
面板的类名为Ext.Panel，其xtype 为panel，下面的代码可以显示出面板的各个组成部
分：

<script>
Ext.onReady(function(){
	new Ext.Panel({
	renderTo:"hello",
	title:"面板头部header",
	width:300,
	height:200,
	html:'<h1>面板主区域</h1>',
	tbar:[{text:'顶部工具栏topToolbar'}],
	bbar:[{pressed:true,text:'刷新'}],
	buttons:[{text:"按钮位于footer"}]
	});
	
	new Ext.Panel({
		renderTo:"hello",
		title:"hello",
		width:300,
		height:200,
		html:'<h1>Hello,easyjf open source!</h1>',
		tools:[{
		id:"save"},
		{id:"help",
			handler:function(){Ext.Msg.alert('help','please help me!');}
		},
		{id:"close"}],
		tbar:[{pressed:true,text:'刷新'}]
		});
	
	new Ext.Panel({
		renderTo:"hello",
		title:"hello",
		width:300,
		height:200,
		html:'<h1>Hello,easyjf open source!</h1>',
		tbar:[new Ext.Toolbar.TextItem('工具栏:'),
		{xtype:"tbfill"},
		{pressed:true,text:'添加'},
		{xtype:"tbseparator"},
		{pressed:true,text:'保存'}
		]
		});
	});
</script>

10、选项面板的TabPanel
在前面的示例中，为了显示一个面板，我们需要在页面上添加一个，然后把Ext 控件
渲染到这个div 上。VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，
并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。

<script>
Ext.onReady(function(){
	new Ext.Viewport({
		enableTabScroll:true,
		layout:"border",
		items:[{title:"面板",
		region:"north",
		height:50,
		html:"<h1>网站后台管理系统!</h1>"
		},
		{title:"菜单",
		region:"west",
		width:200,
		collapsible:true,
		html:"菜单栏"
		},
		{
		xtype:"tabpanel",
		region:"center",
		items:[{title:"面板1"},
		       {title:"面板2"}]
		       }
		       ]
		       });
	});
</script>

11、窗口及对话框
窗口基本应用
ExtJS 中窗口是由Ext.Window 类定义，该类继承自Panel，因此窗口其实是一种特殊的
面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。看下面的代码：

<script>
var i=0;
function newWin()
{
	var win=new Ext.Window({title:"窗口"+i++,
		width:400,
		height:300,
		maximizable:true});
		win.show();
}

Ext.onReady(function(){
	Ext.get("btn").on("click",newWin);
	});
</script>

窗口分组
窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组
Ext.WindowMgr 中。窗口分组由类Ext.WindowGroup 定义，该类包括bringToFront、getActive、
hideAll、sendToBack 等方法用来对分组中的窗口进行操作。

<script>
var i=0;
function newWin()
{
	var win=new Ext.Window({title:"窗口"+i++,
		width:400,
		height:300,
		maximizable:true});
		win.show();
}

var i=0,mygroup;
function newWins()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}
function hideAll()
{
mygroup.hideAll();
}

Ext.onReady(function(){
	Ext.get("btn").on("click",newWin);
	
	mygroup=new Ext.WindowGroup();
	Ext.get("btn1").on("click",newWins);
	Ext.get("btnToBack").on("click",toBack);
	Ext.get("btnHide").on("click",hideAll);
	});
</script>

12、对话框
由于传统使用alert、confirm 等方法产生的对话框非常古板，不好看。因此，ExtJS 提供
了一套非常漂亮的对话框，可以使用这些对话框代替传统的alert、confirm 等，实现华丽的
应用程序界面。
Ext 的对话框都封装在Ext.MessageBox 类，该类还有一个简写形式即Ext.Msg，可以直
接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框。看下
面的代码：

<script>
Ext.onReady(function(){
	
	function save(button)
	{
	if(button=="yes")
	{
	//执行数据保存操作
	} else if(button=="no")
	{
	//不保存数据
	} else
	{
	//取消当前操作
	}
	}
	
	Ext.get("btnAlert").on("click",function(){
		Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
		});
	Ext.get("btn").on("click",function(){
		//Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
		//alert(button);
		///alert(text);
		//});
		
		Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
			if(button=="yes"){
			//执行删除操作
			alert("成功删除");
			}
			});
		});
	
	Ext.get("btn1").on("click",function(){
		Ext.MessageBox.prompt("输入提示框","请输入你的新年愿望:",function(button,text){
		if(button=="ok"){
		alert("你的新年愿望是:"+text);
		}
		else alert("你放弃了录入!");
		});
		});
	
	Ext.get("btn2").on("click",function(){
		Ext.Msg.show({
		title:'保存数据',
		msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',
		buttons: Ext.Msg.YESNOCANCEL,
		fn: save,
		icon: Ext.MessageBox.QUESTION});
		});
	});
</script>

13、布局概述
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext 的所有容器组件都支持而局
操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及
渲染方式等。
ExtJS 的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS 的
容器组件包含一个layout 及layoutConfig 配置属性，这两个属性用来指定容器使用的布局及
布局的详细配置信息，如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为
布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig 配置，有的则不需
要layoutConfig 配置。看代码：

<script>
Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		width:400,
		height:200,
		layout:"column",
		items:[{columnWidth:.5,
		title:"面板1"},
		{columnWidth:.5,
		title:"面板2"}]
		});
	});
</script>

ExtJS2.0 一共包含十种布局，常用的布局有border、column、fit、form、card、tabel
等布局，下面我们分别对这几种布局作简单的介绍。

Border区域布局
Border 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，
分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素
所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：

<script>
Ext.onReady(function(){
	new Ext.Viewport({
		layout:"border",
		items:[{region:"north",
		height:50,
		title:"顶部面板"},
		{region:"south",
		height:50,
		title:"底部面板"},
		{region:"center",
		title:"中央面板"},
		{region:"west",
		width:100,
		title:"左边面板"},
		{region:"east",
		width:100,
		title:"右边面板"}
		]
		});
	});
</script>

Column列布局
Column 列布局由Ext.layout.ColumnLayout 类定义，名称为column。列布局把整个容器
组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth
或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度，而
width 则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面
的代码：

<script>
Ext.onReady(function(){
	new Ext.Panel({
	renderTo:"hello",
	title:"容器组件",
	layout:"column",
	width:500,
	height:100,
	items:[{title:"列1",width:100},
	{title:"列2",width:200},
	{title:"列3",width:100},
	{title:"列4"}
	]
	}
	);
	});
</script>

Fit布局
Column 列布局由Ext.layout.ColumnLayout 类定义，名称为column。列布局把整个容器
组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth
或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度，而
width 则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面
的代码：

<script>
Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"fit",
		width:500,
		height:100,
		items:[{title:"子元素",html:"这是子元素中的内容"}
		] }
		);
	});
</script>

上面的代码指定父容器使用Fit 布局，因此子将自动填满整个父容器。
如果容器组件中有多个子元素，则只会显示一个元素

Form布局
Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中
输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。看下面的代
码：

<script>
Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		width:300,
		layout:"form",
		hideLabels:false,
		labelAlign:"right",
		height:120,
		defaultType: 'textfield',
		items:[
		{fieldLabel:"请输入姓名",name:"name"},
		{fieldLabel:"请输入地址",name:"address"},
		{fieldLabel:"请输入电话",name:"tel"}
		] }
		);
	});
</script>

在实际应用中，Ext.form.FormPanel 这个类默认布局使用的是Form 布局，而且FormPanel
还会创建与<form> 标签相关的组件，因此一般情况下我们直接使用FormPanel 即可。

Accordion布局
Accordion 布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局，也就
是说使用该布局的容器组件中的子元素是可折叠的形式。来看下面的代码:

<script>
Ext.onReady(function(){
	new Ext.Panel({
	renderTo:"hello",
	title:"容器组件",
	width:500,
	height:200,
	layout:"accordion",
	layoutConfig: {
	animate: true
	},
	items:[{title:"子元素1",html:"这是子元素1中的内容"},
	{title:"子元素2",html:"这是子元素2中的内容"},
	{title:"子元素3",html:"这是子元素3中的内容"}
	] }
	);
	});
</script>

指定使用Accordion 布局，该容器组件中包含三个子
元素，在layoutConfig 中指定布局配置参数animate 为true，表示在执行展开折叠时是否应
用动画效果。

Table布局及其它布局
Table 布局由类Ext.layout.TableLayout 定义，名称为table，该布局负责把容器中的子元
素按照类似普通html 标签

<script>
Ext.onReady(function(){
	var panel=new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		width:500,
		height:200,
		layout:"table",
		layoutConfig: {
		columns: 3
		},
		items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
		{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
		{title:"子元素3",html:"这是子元素3中的内容"},
		{title:"子元素4",html:"这是子元素4中的内容"}
		] }
	);
	});
</script>

ExtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、
列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel 定义，继承自Panel，其xtype 为grid。ExtJS 中，表格Grid
必须包含列定义信息， 并指定表格的数据存储器Store 。表格的列信息由类
Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义，数据存储器根据解
析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。

<script>
function showUrl(value)
{
return "<a href='http://127.0.0.1'>"+value+"</a>";
}

Ext.onReady(function(){
	  var data=[[1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
	           [2, 'jfox', 'huihoo','www.huihoo.org'],
	           [3, 'jdon', 'jdon','www.jdon.com'],
	           [4, 'springside', 'springside','www.springside.org.cn']];
	 var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
	 var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},
	           {header:"开发团队",dataIndex:"organization",sortable:true},
	           {header:"网址",dataIndex:"homepage",renderer:showUrl}]);
	           var grid = new Ext.grid.GridPanel({
	           renderTo:"hello",
	           title:"中国Java开源产品及团队",
	           height:200,
	           width:600,
	           cm:colM,
	           store:store,
	           autoExpandColumn:2
	           });
	});
</script>

数据变成了一维数组，数组中的每一个元素是一个对象，这些对象包含name、
organization、homepage、id 等属性。要让表格显示上面的数据，其实非常简单，只需要把
store 改成用Ext.data.JsonStore 即可

<script>
function showUrl(value)
{
return "<a href='http://127.0.0.1'>"+value+"</a>";
}

Ext.onReady(function(){
	var data=[{id:1,
		name:'EasyJWeb',
		organization:'EasyJF',
		homepage:'www.easyjf.com'},
		{id:2,
		name:'jfox',
		organization:'huihoo',
		homepage:'www.huihoo.org'},
		{id:3,
		name:'jdon',
		organization:'jdon',
		homepage:'www.jdon.com'},
		{id:4,
		name:'springside',
		organization: 'springside',
		homepage:'www.springside.org.cn'}
		];
	var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});
	var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},
	{header:"开发团队",dataIndex:"organization",sortable:true},
	{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
	var grid = new Ext.grid.GridPanel({
	renderTo:"hello",
	title:"中国Java开源产品及团队",
	height:200,
	width:600,
	cm:colM,
	store:store,
	autoExpandColumn:2
	})
	});
</script>

当然，表格同样能显示xml 格式的数据，假如
上面的数据存放成hello.xml 文件中

<script>
function showUrl(value)
{
return "<a href='http://127.0.0.1'>"+value+"</a>";
}

Ext.onReady(function(){
	var store=new Ext.data.Store({
		url:"hello.xml",
		reader:new Ext.data.XmlReader({
		record:"row"},
		["id","name","organization","homepage"])
		});
		var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},
		{header:"开发团队",dataIndex:"organization",sortable:true},
		{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
		var grid = new Ext.grid.GridPanel({
		renderTo:"hello",
		title:"中国Java开源产品及团队",
		height:200,
		width:600,
		cm:colM,
		store:store,
		autoExpandColumn:2
		});
		store.load();
	});
</script>

可编辑表格EditorGridPanel
可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由
类Ext.grid.EditorGridPanel 表示，xtype 为editorgrid。使用EditorGridPanel 与使用普通的
GridPanel 方式一样，区别只是在定义列信息的时候，可以指定某一列使用的编辑即可，下
面来看一个简单的示例。

<script>
Ext.onReady(function(){
	var data=[{id:1,
	name:'小王',
	email:'[e-mail]',
	sex:'男',
	bornDate:'1991-4-4'},
	{id:1,
	name:'小李',
	email:'[e-mail]',
	sex:'男',
	bornDate:'1992-5-6'},
	{id:1,
	name:'小兰',
	email:'[e-mail]',
	sex:'女',
	bornDate:'1993-3-7'}
	];
	var store=new Ext.data.JsonStore({
	data:data,
	fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
	});
	var colM=new Ext.grid.ColumnModel([{
	header:"姓名",
	dataIndex:"name",
	sortable:true,
	editor:new Ext.form.TextField()},
	{header:"性别",
	dataIndex:"sex",
	editor:new Ext.form.ComboBox({transform:"sexList",
		triggerAction: 'all',
		lazyRender:true})
	}, 
	{header:"出生日期",
	dataIndex:"bornDate",
	width:120,
	renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
	editor:new Ext.form.DateField({format:'Y年m月d日'})},
	{header:"电子邮件",
	dataIndex:"email",
	sortable:true,
	editor:new Ext.form.TextField()}
	]);
	var grid = new Ext.grid.EditorGridPanel({
	renderTo:"hello",
	title:"学生基本信息管理",
	height:200,
	width:600,
	cm:colM,
	store:store,
	autoExpandColumn:3,
	clicksToEdit:1
	});
	});
</script>

<div id="hello">
<select id="sexList" style="display:none;"> 
      <option>男</option> 
      <option>女</option> 
</select> 
</div>

那么如何保存编辑后的数据呢？答案是直接使用afteredit 事件。当对一个单元格进行编
辑完之后，就会触发afteredit 事件，可以通过该事件处理函数来处理单元格的信息编辑。比
如在http://wlr.easyjf.com 这个单用户blog 示例中，当我们编辑一个日志目录的时候，需要
把编辑后的数据保存到服务器，代码如下：

<script>
Ext.onReady(function(){
	var data=[{id:1,
	name:'小王',
	email:'[e-mail]',
	sex:'男',
	bornDate:'1991-4-4'},
	{id:1,
	name:'小李',
	email:'[e-mail]',
	sex:'男',
	bornDate:'1992-5-6'},
	{id:1,
	name:'小兰',
	email:'[e-mail]',
	sex:'女',
	bornDate:'1993-3-7'}
	];
	var store=new Ext.data.JsonStore({
	data:data,
	fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
	});
	var colM=new Ext.grid.ColumnModel([{
	header:"姓名",
	dataIndex:"name",
	sortable:true,
	editor:new Ext.form.TextField()},
	{header:"性别",
	dataIndex:"sex",
	editor:new Ext.form.ComboBox({transform:"sexList",
		triggerAction: 'all',
		lazyRender:true})
	}, 
	{header:"出生日期",
	dataIndex:"bornDate",
	width:120,
	renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
	editor:new Ext.form.DateField({format:'Y年m月d日'})},
	{header:"电子邮件",
	dataIndex:"email",
	sortable:true,
	editor:new Ext.form.TextField()}
	]);
	var grid = new Ext.grid.EditorGridPanel({
	renderTo:"hello",
	title:"学生基本信息管理",
	height:200,
	width:600,
	cm:colM,
	store:store,
	autoExpandColumn:3,
	clicksToEdit:1
	});
	grid.on("afteredit",afterEdit,grid);
	});

function afterEdit(obj){
  alert(obj+"我被修改了！");
}
</script>

TreePanel
TreePanel 基本使用
在应用程序中，我们经常会涉及到要显示或处理树状结构的对象信息，比如部门信息、地区
信息，或者是树状的菜单信息，操作系统中的文件夹信息等。
对于传统的html 页面来说，要自己实现显示树比较困难，需要写很多的javascript，特
别是对于基于Ajax 异步加载的树来说，不但涉及到Ajax 数据加载及处理技术，还需要考虑
跨浏览器支持等，处理起来非常麻烦。ExtJS 中提供了现存的树控件，通过这些控件可以在
B/S 应用中快速开发出包含树结构信息的应用。
TreePanel基本使用
树控件由Ext.tree.TreePanel 类定义，控件的名称为treepanel，TreePanel 类继承自Panel
面板。在ExtJS 中使用树控件其实非常简单，我们先来看下面的代码

<script>
Ext.onReady(function(){
	var root=new Ext.tree.          TreeNode({
		id:"root",
		text:"树的根"});
		root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"子节点"
		}));
		var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:100
		});
});
</script>

xtJS 的树控件提供了对这种功能的支持，你只需要在创建树控件的时
候，通过给树指定一个节点加载器，可以用来从服务器端动态加载树的节点信息。

<script>
Ext.onReady(function(){
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"树的根"});
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
loader: new Ext.tree.TreeLoader({url:"treedata.js"}),
width:100
});
});
</script>

[{
id: 1,
text: '子节点1',
leaf: true
},{
id: 2,
text: '儿子节点2',
children: [{
id: 3,
text: '孙子节点',
leaf: true
}]
}]

事件处理
当然，仅仅能显示一棵树还不够，我们一般还需要在用户点击树节点的时候执行相应的
东西，比如打开某一个连接，执行某一个函数等，这就需要使用到事件处理。比如下面的代
码：

<script>
Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
	id:"root",
	text:"树的根"});
	var c1=new Ext.tree.TreeNode({
	id:"c1",
	text:"子节点"
	});
	root.appendChild(c1);
	var tree=new Ext.tree.TreePanel({
	renderTo:"hello",
	root:root,
	width:100
	});
	tree.on("click",function(node,event){
	alert("您点击了"+node.text);
	}
	);
	c1.on("click",function(node,event){
	alert("您点击了"+node.text);
	}
	);
	});
</script>

当然，如果只是要实现当点击树节点时跳到某一个指定url 的功能则非常简单。看下面
[{
id: 1,
text: '子节点',
leaf:true
}]
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"});
var c1=new Ext.tree.TreeNode({
id:"c1",
text:"子节点"
});
root.appendChild(c1);
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:100
});
tree.on("click",function(node,event){
alert("您点击了"+node.text);
}
);
c1.on("click",function(node,event){
alert("您点击了"+node.text);
}
);
});
当然，如果只是要实现当点击树节点时跳到某一个指定url 的功能则非常简单。看下面的代码：

<script>
Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
	id:"root",
	href:"http://www.easyjf.com",
	hrefTarget:"_blank",
	text:"树的根"});
	var c1=new Ext.tree.TreeNode({
	id:"c1",
	href:"http://wlr.easyjf.com",
	hrefTarget:"_blank",
	text:"子节点"
	});
	root.appendChild(c1);
	var tree=new Ext.tree.TreePanel({
	renderTo:"hello",
	root:root,
	width:100
	});
	});
</script>

TreeNode
在ExtJS 中，不管是叶子节点还是非叶子节点，都统一用TreeNode 表表示树的节点。
在ExtJS 中，有两种类型的树节点。一种节点是普通的简单树节点，由Ext.tree.TreeNode 定
义，另外一种是需要异步加载子节点信息的树节点，该类由Ext.tree.AsyncTreeNode 定义。

<script>
Ext.onReady(function(){
	var tree=new Ext.tree.TreePanel({
	renderTo:"hello",
	root:new Ext.tree.AsyncTreeNode({
	text:"根节点"
	}),
	width:100
	});
	});
</script>

里没有指定树的加载器，所以“根节点”会变成一直处于加载的状态。
对于普通的TreeNode 来说，可以通过调用节点的appendChild、removeChild 等方法来
往该节点中加入子节点或删除子节点等操作。

<script>
Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
		id:"root",
		text:"树的根"
		});
		var c1=new Ext.tree.TreeNode({
		text:"子节点1"
		})
		var c2=new Ext.tree.AsyncTreeNode({
		text:"子节点2"
		});
		root.appendChild(c1);
		root.appendChild(c2);
		var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:300,
		loader:new Ext.tree.TreeLoader({
		applyLoader:false,
		url:"treedata.js"
		})
		});
	});
</script>

另外要在树以外的程序中得到当前选择的节点，可以通过TreePanel 的
getSelectionModel 方法来获得，该方法默认返回的是Ext.tree.DefaultSelectionModel 对象，
DefaultSelectionModel 的getSelectedNode 方法返回当前选择的树节点。

TreeLoader
对于ExtJS 中的树来说，树加载器TreeLoader 是一个比较关键的部件，树加载器由
Ext.tree.TreeLoader 类定义，只有AsyncTreeNode 才会使用TreeLoader。

<script>
Ext.onReady(function(){
	var loader=new Ext.tree.TreeLoader({
	url:"treedata.js"
	});
	var root=new Ext.tree.AsyncTreeNode({
	id:"root",
	text:"根节点",
	loader:loader});
	var tree=new Ext.tree.TreePanel({
	renderTo:"hello",
	root:root,
	width:100
	});
	});
</script>

自定义TreeLoader
在ExtJS 自己的TreeLoader 中，当要实现从远程服务器端异步加载树节点信息的时候，
都是通过请求服务器上的某一个URL 来进行的