2012/7/27Extjs学习随笔

①Ext.data.XmlReader  是XML文档解析器，用于把XML文档数据转换成记录集Record对象。看代码：

	var record = Ext.data.Record.create([
		{name:'title'},
		{name:'username',mapping:'author'},
		{name:'loginTimes',type:'int'}
		]);
	
	var reader  = new Ext.data.XmlReader({
		totalRecords:'results',
		record:'rows',
		id:'id'
	},record);

 上面的reader可以解析下面的xml文档信息：

	<topics>
	<results>2</results>
	<row>
	<id>1</id>
	<title>你好</title>
	<author>小王</author>
	<loginTimes>3</loginTimes>
	</row>
	<row>
	<id>2</id>
	<title>新年好<title>
	<author>小李</author>
	<loginTimes>4<loginTimes>
	</row>
	</topics>

 ② DateProxy与自定义Store

DataProxy字面解释是数据代理，可理解为数据源，就是需要交给DataReader处理的数据的来源。DataProxy基类由Ext.data.DataProxy定义，在DataProxy基础上，Extjs提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三个分别用于从客户端内存读数据，Ajax读取服务器端的数据及从跨域服务器中读取数据的三种实现方式。

比如像SimpleStore等存储器是直接从客户端的内存数组中直接读取数据，此时就可以直接使用Ext.data.MemoryProxy,而大多数需要从服务器加载的数据直接使用Ext.data.HttpProxy,HttpProxy直接使用Ext.Ajax加载服务器的数据，由于这种请求是不能跨域的，所以要读取跨域服务器中的数据时就需要使用到Ext.data.ScriptTagProxy.

在实际应用中，除了基本的从内存中读取javacript数组对象，从服务器读取JSON数据，从服务器读取XML文档等形式的数据外，有时候还需要使用其他的数据读取方式。这时候需要创建自定义的DataProxy及Store.

③在应用程序中， 我们经常会涉及到要显示或处理树状结构的对象信息，比如部门信息，地区信息，或者是树状的菜单信息，操作系统中文件夹信息等。

对于传统HTML页面来说，要自己实现数比较困难，需要写很多的javascript,特别是对于基于Ajax异步加载的树来说，不但涉及到Ajax数据加载及树立技术，还需要考虑跨浏览器支持等，处理起来非常麻烦。Extjs提供了现存的树控件，通过这些树控件，可以在B/S应用中快速开发出包含树结构信息的应用。

A. TreePanel

基本使用

　树控件由Ext.tree.TreePanel类定义，xtype为treepanel,TreePanel继承自Panel面板。在Extjs中使用树控件其实非常简单，看代码：

Ext.onReady(function(){
	//创建一个树根
	var root = new Ext.tree.TreeNode(
	{
		id:'root',
		text:'树的根'
	}	
	);
	//在树根上创建一个子节点
	root.appendChild(
	{
		id:'c1',
		text:'树的子节点',
//		width:150
	}	
	);
	//创建一个树面板
	var tree = new Ext.tree.TreePanel(
	{
		renderTo:'hello',
		root:root,
		width:200
	}	
	);
});

 运行效果图：

另外，在创建树控件的时候，通过给树指定一个节点加载器，可以用来从服务器端动态加载树的节点信息。看代码：

Ext.onReady(function(){
	//创建一个树根
	var root = new Ext.tree.AsyncTreeNode(
	{
		id:'root',
		text:'树的根'
	}	
	);
	//在树根上创建一个子节点

	//创建一个树面板
	var tree = new Ext.tree.TreePanel(
	{
		renderTo:'hello',
		root:root,
		width:200,
		loader:new Ext.tree.TreeLoader({url:'treedata.js'})
	}	
	);
});

 在treedata.js这个url返回的内容如下：

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

。执行上面的程序，可以得到一颗异步加载子节点的树。上面的程序是加载完树的所有节点信息。当然我们也可以实现让每一个节点都支持动态加载的树，只需要在向服务器请求数据的时候，每次服务器端返回的数据只包含子节点，而不用把孙子节点也返回。上面的treedata.js中的内容修改一下：

[{
id: 1,
text: '子节点',
leaf: false
}]

 该节点通过指定leaf为false（默认情况下为false）说明该节点不是一个叶子节点，其下面还有子节点。

B. 事件处理

 仅仅把树显示出来还不够，我们一般还需要在点击树节点的时候执行相应的动作，比如打开某一个连接，执行一个函数等，这就需要用到函数处理。看代码：

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:200,
	});
	tree.on('click',function(node,event){
		alert('您点击了'+node.text);
	});
	c1.on('click',function(node,event){
		alert('您点击了'+node.text);
	});
});

 运行效果图：