-38-程序结果与前面使用Ext.Panel并指定form布局的一样，如下图所示：6.5、Accordion布局Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。来看下面的代码:上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。执行结果将生成如下图所示的界面：]});});Ext.onReady(function(){newExt.Panel({renderTo:\"helloitle:\"容器组件\width:500,height:200,layout:\"accordion\layoutConfig:{animate:true},items:[{title:\"子元素1\{title:\"子元素2\{title:\"子元素3\]});});ExtJS实用简明教程

-39-点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板，如下图：6.6、Table布局及其它布局Table布局由类Ext.layout.TableLayout定义，名称为table，该布局负责把容器中的子元素按照类似普通html标签Ext.onReady(function(){varpanel=newExt.Panel({renderTo:\"helloitle:\"容器组件\width:500,height:200,layout:\"table\layoutConfig:{columns:3},items:[{title:\"子元素1\{title:\"子元素2\{title:\"子元素3\{title:\"子元素4\ExtJS实用简明教程

-40-上面的代码创建了一个父容器组件，指定使用Table布局，layoutConfig使用columns指定父容器分成3列，子元素中使用rowspan或colspan来指定子元素所横跨的单元格数。程序的运行效果如下图所示：除了前面介绍的几种布局以外，Ext2.0中还包含其它的Ext.layout.AbsoluteLayout、Ext.layout.AnchorLayout等布局类，这些布局主要作为其它布局的基类使用，一般情况下我们不会在应用中直接使用。另外，我们也可以继承10种布局类的一种，来实现自定义的布局。关于ExtJS布局的详细说明，请参考wlr.easyjf.com中的VIP文档《ExtJS布局Layout详解（1）、(2)、(3)》。第七章、使用表格控件

7.1、基本表格GridPanelExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。我们首先来看最简单的使用表格的代码：]});});Ext.onReady(function(){vardata=[[1,'EasyJWeb','EasyJF','www.easyjf.com'],[2,'jfox','huihoo','www.huihoo.org'],ExtJS实用简明教程

-41-执行上面的代码，可以得到一个简单的表格，如下图所示：上面的代码中，第一行“vardata=…”用来定义表格中要显示的数据，这是一个[][]二维数组；第二行“varstore=…”用来创建一个数据存储，这是GridPanel需要使用配置属性，数据存储器Store负责把各种各样的数据（如二维数组、JSon对象数组、xml文本）等转换成ExtJS的数据记录集Record，关于数据存储器Store我们将在下一章中作专门介绍。第三行“vargrid=newExt.grid.GridPanel(…)”负责创建一个表格，表格包含的列由columns配置属性来描述，columns是一数组，每一行数据元素描述表格的一列信息，表格的列信息包含列头显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sorable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等，在上面的列子中只用到了header及dataIndex。下面我们看简单看看表格的排序及隐藏列特性，简单修改一下上面的代码，内容如下：[3,'jdon','jdon','www.jdon.com'],[4,'springside','springside','www.springside.org.cn']];varstore=newExt.data.SimpleStore({data:data,fields:[\"id\vargrid=newExt.grid.GridPanel({renderTo:\"helloitle:\"中国Java开源产品及团队\height:150,width:600,columns:[{header:\"项目名称\{header:\"开发团队\{header:\"网址\store:store,autoExpandColumn:2});});Ext.onReady(function(){vardata=[[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']];varstore=newExt.data.SimpleStore({data:data,fields:[\"id\varcolM=newExt.grid.ColumnModel([{header:\"项目名称\{header:\"开发团队\ExtJS实用简明教程

-42-直接使用newExt.grid.ColumnModel来创建表格的列信定义信息，在“项目名称“及“开发团队”列中我们添加了sortable为true的属性，表示该列可以排序，执行上面的代码，我们可以得到一个支持按“项目名称“或“开发团队”的表格，如图xxx所示。(按项目名称排序)(可排序的列表头后面小按钮可以弹出操作菜单){header:\"网址\vargrid=newExt.grid.GridPanel({renderTo:\"helloitle:\"中国Java开源产品及团队\height:200,width:600,cm:colM,store:store,autoExpandColumn:2});});ExtJS实用简明教程

-43-另外，每一列的数据渲染方式还可以自己定义，比如上面的表格中，我们希望用户在表格中点击网址则直接打开这些开源团队的网站，也就是需要给网址这一列添加上超级连接。下面的代码实现这个功能：上面的代码跟前面的示例差别不大，只是在定义“网址”列的时候多了一个renderer属性，即{header:\"网址\是一个自定义的函数，内容就是根据传入的value参数返回一个包含标签的html片段。运行上面的代码显示结果如下图所示：functionshowUrl(value){return\"\"+value+\"\";}Ext.onReady(function(){vardata=[[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']];varstore=newExt.data.SimpleStore({data:data,fields:[\"id\varcolM=newExt.grid.ColumnModel([{header:\"项目名称\{header:\"开发团队\{header:\"网址\vargrid=newExt.grid.GridPanel({renderTo:\"helloitle:\"中国Java开源产品及团队\height:200,width:600,cm:colM,store:store,autoExpandColumn:2});});ExtJS实用简明教程

-44-自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息，只是的浏览器能处理的html都可以。除了二级数组以外，表格还能显示其它格式的数据吗？答案是肯定的，下面假如我们的表格数据data定义成了下面的形式：也就是说数据变成了一维数组，数组中的每一个元素是一个对象，这些对象包含name、organization、homepage、id等属性。要让表格显示上面的数据，其实非常简单，只需要把store改成用Ext.data.JsonStore即可，代码如下：vardata=[{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'}];varstore=newExt.data.JsonStore({data:data,fields:[\"id\varcolM=newExt.grid.ColumnModel([{header:\"项目名称\{header:\"开发团队\{header:\"网址\vargrid=newExt.grid.GridPanel({renderTo:\"helloitle:\"中国Java开源产品及团队\ExtJS实用简明教程

-45-上面的代码得到的结果与前面的一样。当然，表格同样能显示xml格式的数据，假如上面的数据存放成hello.xml文件中，内容如下：为了把这个xml数据用ExtJS的表格Grid进行显示，我们只需要把store部分的内容调整成如下的内容即可：height:200,width:600,cm:colM,store:store,autoExpandColumn:2});1EasyJWebEasyJFwww.easyjf.com2jfoxhuihoowww.huihoo.org3jdonjdonwww.jdon.com4springsidespringsidewww.springside.org.cnExtJS实用简明教程

-46-其它的部分不用改变，完整的代码如下：store.laod()是用来加载数据，执行上面的代码产生的表格与前面的完全一样。关于表格控件GridPanel的详细说明，请参考wlr.easyjf.com中的VIP文档《ExtJS表格GridPanel详解》。7.2、可编辑表格EditorGridPanel可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表示，xtype为editorgrid。使用EditorGridPanel与使用普通的varstore=newExt.data.Store({url:\"hello.xml\reader:newExt.data.XmlReader({record:\"row\[\"id\});functionshowUrl(value){return\"\"+value+\"\";}Ext.onReady(function(){varstore=newExt.data.Store({url:\"hello.xml\reader:newExt.data.XmlReader({record:\"row\[\"id\});varcolM=newExt.grid.ColumnModel([{header:\"项目名称\{header:\"开发团队\{header:\"网址\vargrid=newExt.grid.GridPanel({renderTo:\"helloitle:\"中国Java开源产品及团队\height:200,width:600,cm:colM,store:store,autoExpandColumn:2});store.load();});ExtJS实用简明教程

-47-GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一列使用的编辑即可，下面来看一个简单的示例。Ext.onReady(function(){vardata=[{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'},{id:1,name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1992-5-6'},{id:1,name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'}];varstore=newExt.data.JsonStore({data:data,fields:[\"id\});varcolM=newExt.grid.ColumnModel([{header:\"姓名\dataIndex:\"name\sortable:true,editor:newExt.form.TextField()},{header:\"性别\dataIndex:\"sex\"},{header:\"出生日期\dataIndex:\"bornDate\width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日')},{header:\"电子邮件\dataIndex:\"email\sortable:true,editor:newExt.form.TextField()}]);vargrid=newExt.grid.EditorGridPanel({renderTo:\"hello\ExtJS实用简明教程

-48-上面的程序首先定义了一个包含学生信息的对象数组，然后创建了一个JsonStore，在创建这个store的时候，指定bornDate列的类型为日期date类型，并使用dateFormat来指定日期信息的格式为\"Y-n-j\"，Y代表年，n代表月,j代表日期。定义表格列模型的时候，对于“姓名”及“电子邮件”列我们使用editor来定义该列使用的编辑器，这里是使用Ext.form.TextField，最后使用newExt.grid.EditorGridPanel(…)来创建一个可编辑的表格。执行上面的程序可以生成一个表格，双击表格中的“姓名”、或“电子邮件”单元格中的信息可以触发单元格的编辑，可以在单元格的文本框中直接编辑表格中的内容，修改过的单元格会有特殊的标记，如下图所示：为了能编辑“性别”及“出生日期”列，同样只需要在定义该列的时候指定editor即可。由于出生日期是日期类型，因此我们可以使用日期编辑器来编辑，“性别”一列的数据不应该让用户直接输入，而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件，下拉选择框编辑器可以使用Ext.form.ComboBox组件，下面是实现对性别及出生日期等列信息编辑的代码：title:\"学生基本信息管理\height:200,width:600,cm:colM,store:store,autoExpandColumn:3});});varcolM=newExt.grid.ColumnModel([{header:\"姓名\dataIndex:\"name\sortable:true,editor:newExt.form.TextField()},{header:\"性别\dataIndex:\"sex\editor:newExt.form.ComboBox({transform:\"sexListriggerAction:'all',lazyRender:true})ExtJS实用简明教程

-49-注意在定义EditorGridPanel的时候，我们增加了一个属性“clicksToEdit:1”，表示点击一次单元格即触发编辑，因为默认情况下该值为2，需要双击单元格才能编辑。为了给ComboBox中填充数据，我们使用设置了该组件的transform配置属性值为sexList，sexList是一个传统的框，我们需要在html页面中直接定义，代码如下：执行上面的程序，我们可以得到一个能对表格中所有数据进行编辑的表格了。点击上面的“性别”一列的单元格时，会出现一个下拉选择框，点击“出生日期”一列的单元格时，会出现一个日期数据选择框，如图xxxx所示：},{header:\"出生日期\dataIndex:\"bornDate\width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),editor:newExt.form.DateField({format:'Y年m月d日'})},{header:\"电子邮件\dataIndex:\"email\sortable:true,editor:newExt.form.TextField()}]);vargrid=newExt.grid.EditorGridPanel({renderTo:\"helloitle:\"学生基本信息管理\height:200,width:600,cm:colM,store:store,autoExpandColumn:3,clicksToEdit:1});男女ExtJS实用简明教程

-50-(编辑性别列中的数据)(编辑出生日期列中的数据)那么如何保存编辑后的数据呢？答案是直接使用afteredit事件。当对一个单元格进行编辑完之后，就会触发afteredit事件，可以通过该事件处理函数来处理单元格的信息编辑。比如在http://wlr.easyjf.com这个单用户blog示例中，当我们编辑一个日志目录的时候，需要把编辑后的数据保存到服务器，代码如下：this.grid.on(\"afteredit\…afterEdit:function(obj){varr=obj.record;varid=r.get(\"id\");varname=r.get(\"name\");varc=this.record2obj(r);vartree=this.tree;varnode=tree.getSelectionModel().getSelectedNode();if(node&&node.id!=\"root\")c.parentId=node.id;if(id==\"-1\"&&name!=\"\"){topicCategoryService.addTopicCategory(c,function(id){if(id)r.set(\"id\if(!node)node=tree.root;node.appendChild(newExt.tree.TreeNode({id:id,text:c.name,leaf:true}));node.getUI().removeClass('x-tree-node-leaf');node.getUI().addClass('x-tree-node-expanded');node.expand();});ExtJS实用简明教程

-51-关于可编辑表格控件的详细说明，请参考wlr.easyjf.com中的VIP文档《ExtJS可编辑表格EditorGridPanel详解》。7.3、与服务器交互在实际的应用中，表格中的数据一般都是直接存放在数据库表或服务器的文件中。因此，在使用表格控件的时候经常需要与服务器进行交互。ExtJS使用Ajax方式提供了一套与服务器交互的机制，也就是可以不用刷新页面，就可以访问服务器的程序进行数据读取或数据保存等操作。比如前面在表格中显示xml文档中数据的例子中，就是一个非常简单的从服务器端读取数据的例子，再回顾一下代码：因为Sote组件接受一个参数url，如果设置url，则ExtJS会创建一个与服务器交互的Ext.data.HttpProxy对象，该对象通过指定的Connection或Ext.Ajax.request来向服务端发送请求，从而可以读取到服务器端的数据。经验表明，服务器端产生JSon数据是一种非常不错的选择，也就是说假如服务器的url“student.ejf?cmd=list”产生下面的JSON数据输出：}elseif(name!=\"\"){topicCategoryService.updateTopicCategory(r.get(\"id\"),c,function(ret){if(ret)tree.getNodeById(r.get(\"id\")).setText(c.name);});}}varstore=newExt.data.Store({url:\"hello.xml\reader:newExt.data.XmlReader({record:\"row\[\"id\});{results:[{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'},{id:1,name:'小李',email:'xiaoli@easyjf.com',ExtJS实用简明教程

-52-则前面显示学习信息编辑表格的store可以创建成下面的形式：或者：其中root表示包含记录集数据的属性。如果在运行程序中需要给服务器端发送数据的时候，此时可以直接使用ExtJS中提供的Ext.Ajax对象的request方法。比如下面的代码实现放服务器的student.ejf?cmd=save这个url发起一个请求，并在params中指定发送的Student对象：sex:'男',bornDate:'1992-5-6'},{id:1,name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'}]}varstore=newExt.data.Store({url:\"student.ejf?cmd=list\reader:newExt.data.JsonReader({root:\"result\[\"id\});varstore=newExt.data.JsonStore({url:\"student.ejf?cmd=list\root:\"result\fields:[\"id\varstore=newExt.data.JsonStore({url:\"student.ejf?cmd=list\root:\"result\fields:[\"id\functionsFn(){alert('保存成功');}functionfFn(){alert('保存失败');}Ext.Ajax.request({url:'student.ejf?cmd=save’success:sFnExtJS实用简明教程

-53-关于ExtJS中各控件与服务器端如何交互、Ext.Ajax的详细使用说明等请参考wlr.easyjf.com中的VIP文档《ExtJS中客户端控件与服务器控件交互详解》。第八章、数据存储Stroe

8.1、Record在前面的表格应用中，我们已经知道表格的数据是存放类型为Store的数据存储器中，通过指定表格Grid的store属性来设置表格中显示的数据，通过调用store的load或reload方法可以重新加载表格中的数据。ExtJS中用来定义控件中使用数据的API位于Ext.dd命名空间中，本章我们重点对ExtJS中的数据存储Store进行介绍。１、Record

首先需要明确是，ExtJS中有一个名为Record的类，表格等控件中使用的数据是存放在Record对象中，一个Record可以理解为关系数据表中的一行，也可以称为记录。Record对象中即包含了记录（行中各列）的定义信息（也就是该记录包含哪些字段，每一个字段的数据类型等），同时又包含了记录具体的数据信息（也就是各个字段的值）。我们来看直接使用Record的代码：failure:fFn,params:{name:'小李',email:'xiaoli@easyjf.com',bornDate:'1992-5-6',sex:'男'}});Ext.onReady(function(){varMyRecord=Ext.data.Record.create([{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'},{name:'lastLoginTime',mapping:'loginTime',type:'date'}]);varr=newMyRecord({title:\"日志标题\username:\"easyjf\loginTimes:100,loginTime:newDate()});alert(MyRecord.getField(\"username\").mapping);alert(MyRecord.getField(\"lastLoginTime\").type);alert(r.data.username);ExtJS实用简明教程

-54-首先使用Record的create方法创建一个记录集MyRecord，MyRecord其实是一个类，该类包含了记录集的定义信息，可以通过MyRecord来创建包含字段值的Record对象。在上面的代码中，最后的几条语句用来输出记录集的相关信息，MyRecord.getField(\"username\")可以得到记录中username列的字段信息，r.get(\"loginTimes\")可以得到记录loginTimes字段的值，而r.data.username同样能得到记录集中username字段的值。对Record有了一定的了解，那么要操作记录集中的数据就非常简单了，比如r.set(name,value)可以设置记录中某指定字段的值，r.dirty可以得到当前记录是否有字段的值被更改过等等。8.2、StoreStore可以理解为数据存储器，可以理解为客户端的小型数据表，提供缓存等功能。在ExtJS中，GridPanel、ComboBox、DataView等控件一般直接与Store打交道，直接通过store来获得控件中需要展现的数据等。一个Store包含多个Record，同时Store又包含了数据来源，数据解析器等相关信息，Store通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy)，并转换成记录集的形式保存在Store中，作为其它控件的数据输入。数据存储器由Ext.data.Store类定义，一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作，在Ext.data.Store类中数据源由proxy配置属性定义、数据解析（读取）器由reader配置属性定义，一个较为按部就班创建Store的代码如下：alert(r.get(\"loginTimes\"));});varMyRecord=Ext.data.Record.create([{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'},{name:'lastLoginTime',mapping:'loginTime',type:'date'}]);vardataProxy=newExt.data.HttpProxy({url:\"link.ejf\vartheReader=newExt.data.JsonReader({totalProperty:\"results\root:\"rows\id:\"id\"},MyRecord);varstore=newExt.data.Store({proxy:dataProxy,reader:theReader});ExtJS实用简明教程

-55-当然，这样的难免代码较多，Store中本身提供了一些快捷创建Store的方式，比如上面的示例代码中可以不用先创建一个HttpProxy，只需要在创建Store的时候指定一个url配置参数，就会自动使用HttpProxy来加载参数。比如，上面的代码可以简化成：虽然不再需要手动创建HttpProxy了，但是仍然需要创建DataReader等，毕竟还是复杂，ExtJS进一步把这种常用的数据存储器进行了封装，在Store类的基础上提供了SimpleStore、SimpleStore、GroupingStore等，直接使用SimpleStore，则上面的代码可以进一步简化成下面的内容：store.load();varMyRecord=Ext.data.Record.create([{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'},{name:'lastLoginTime',mapping:'loginTime',type:'date'}]);vartheReader=newExt.data.JsonReader({totalProperty:\"results\root:\"rows\id:\"id\"},MyRecord);varstore=newExt.data.Store({url:\"link.ejf\proxy:dataProxy,reader:theReader});store.load();varstore=newExt.data.JSonStore({url:\"link.ejf?cmd=listotalProperty:\"results\root:\"rows\fields:['title',{name:'username',mapping:'author'},{name:'loginTimes',type:'int'},{name:'lastLoginTime',mapping:'loginTime',type:'date'}]});store.load();ExtJS实用简明教程

-56-8.3、DataReaderDataReader表示数据读取器，也就是数据解析器，其负责把从服务器或者内存数组、xml文档中获得的杂乱信息转换成ExtJS中的记录集Record数据对象，并存储到Store里面的记录集数组中。数据解析器的基类由Ext.data.DataReader定义，其它具体的数据解析器都是该类的子类，ExtJS中提供了读取二维数组、JSon数据及Xml文档的三种数据解析器，分别用于把内存中的二级数组、JSON格式的数据及XML文档信息解析成记录集。下面简单的介绍：1）ArrayReaderExt.data.ArrayReader－数组解析器，用于读取二维数组中的信息，并转换成记录集Record对象。首先看下面的代码：这里定义的myReader可以读取下面的二维数组：2）JsonReaderExt.data.JsonReader－Json数据解析器，用于读取JSON格式的数据信息，并转换成记录集Record对象。看下面使用JsonReader的代码：varMyRecord=Ext.data.Record.create([{name:'title',mapping:1},{name:'username',mapping:2},{name:'loginTimes',type:3}]);varmyReader=newExt.data.ArrayReader({id:0},MyRecord);[[1,'测试','小王',3],[2,'新年好','williamraym',13]]varMyRecord=Ext.data.Record.create([{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'}]);varmyReader=newExt.data.JsonReader({totalProperty:\"results\root:\"rows\id:\"id\"},MyRecord);ExtJS实用简明教程

-57-这里的JsonReader可以解析下面的JSON数据：JSonReader还有比较特殊的用法，就是可以把Store中记录集的配置信息存放直接保存在从服务器端返回的JSON数据中，比如下面的例子：这一个不带任何参数的myReader，可以处理从服务器端返回的下面JSON数据：3）XmlReaderExt.data.XmlReader－XML文档数据解析器，用于把XML文档数据转换成记录集Record对象。看下面的代码：{'results':2,'rows':[{id:1,title:'测试',author:'小王',loginTimes:3},{id:2,title:'Ben',author:'williamraym',loginTimes:13}]}varmyReader=newExt.data.JsonReader();{'metaData':{totalProperty:'results',root:'rows',id:'id',fields:[{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'}]},'results':2,'rows':[{id:1,title:'测试',author:'小王',loginTimes:3},{id:2,title:'新年好',author:'williamraym',loginTimes:13}]}varMyRecord=Ext.data.Record.create([{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'}]);varmyReader=newExt.data.XmlReader({totalRecords:\"results\record:\"rows\id:\"id\"},MyRecord);ExtJS实用简明教程

-58-上面的myReader能够解析下面的xml文档信息：8.4、DataProxy与自定义StroeDataProxy字面解释就是数据代理，也可以理解为数据源，也即从哪儿或如何得到需要交给DataReader解析的数据。数据代理（源）基类由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。关于DataProxy的更多内容，请参考http://wlr.easyjf.com的VIP文档中的《ExtJS数据存储Store详解》中的相关内容。在实际应用中，除了基本的从内存中读取javascript数组对象，从服务器读取JSON数组，从服务器取xml文档等形式的数据外，有时候还需要使用其它的数据读取方式。比如熟悉EasyJWeb中远程Web脚本调用引擎或DWR等框架的都知道，通过这些框架我们可以直接在客户端使用javascript调用服务器端业务组件的方法，并把服务器端的结果返回到客户端，客户端得到的是一个javascript对象或数组。由于这种方式的调用是异步的，因此，相对来说有点特殊，即不能直接使用Ext.data.MemoryProxy，也不能直接使用Ext.data.HttpProxy，当然更不需要Ext.data.ScriptTagProxy，这时候就需要创建自定义的DataProxy及Store，然后使用这个自定义的Store来实现这种基于远程脚本调用引擎的框架21小王32williamraym13ExtJS实用简明教程

-59-得到数据。第九章、TreePanel

9.1、TreePanel之基本使用在应用程序中，我们经常会涉及到要显示或处理树状结构的对象信息，比如部门信息、地区信息，或者是树状的菜单信息，操作系统中的文件夹信息等。对于传统的html页面来说，要自己实现显示树比较困难，需要写很多的javascript，特别是对于基于Ajax异步加载的树来说，不但涉及到Ajax数据加载及处理技术，还需要考虑跨浏览器支持等，处理起来非常麻烦。ExtJS中提供了现存的树控件，通过这些控件可以在B/S应用中快速开发出包含树结构信息的应用。TreePanel基本使用树控件由Ext.tree.TreePanel类定义，控件的名称为treepanel，TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单，我们先来看下面的代码代码的第一句使用newExt.tree.TreeNode类来创建一个树节点，第二句使用树节点的root的appendChild方法来往该节点中加入一个子节点，最后直接使用newExt.tree.TreePanel来创建一个树面板，要树面板的初始化参数中指定树的root属性值为前面创建的root节点，也就是树根节点。上面的程序执行效果如下图所示：树的节点信息。ExtJS的树控件提供了对这种功能的支持，你只需要在创建树控件的时候，通过给树指定一个节点加载器，可以用来从服务器端动态加载树的节点信息。我们来看下面的代码：Ext.onReady(function(){varroot=newExt.tree.TreeNode({id:\"rootext:\"树的根\root.appendChild(newExt.tree.TreeNode({id:\"c1ext:\"子节点\"}));vartree=newExt.tree.TreePanel({renderTo:\"hello\root:root,width:100});});ExtJS实用简明教程

-60-treedata.js这个url返回的内容如下：执行上面的程序，可以得到一棵异步加载子节点的树，点击“根节点”会到服务器端加载子节点，如下图所示：当然上面的程序是一次性加载完了树的所有节点信息，我们也可以实现让每一个节点都支持动态加载的树，只需要在通过服务器请求数据的时候，每次服务器端返回的数据只只包含子节点，而不用把孙子节点也返回即可。比如把上面treedata.js中的内容改为下面的内容：也就是节点树中只包含一个子节点，而该子节点通过指定leaf值为false(默认情况该值为false)，表示该节点不是一个叶子节点，其下面还有指节点。再执行前面的程序，不断点击“子节点”可以得到如下图所示的效果：当然这是一个无限循环的树，在实际应用中我们服务器端返回的数据是程序动态产生varroot=newExt.tree.AsyncTreeNode({id:\"rootext:\"树的根\vartree=newExt.tree.TreePanel({renderTo:\"hello\root:root,loader:newExt.tree.TreeLoader({url:\"treedata.js\width:100});[{id:1,text:'子节点1',leaf:true},{id:2,text:'儿子节点2',children:[{id:3,text:'孙子节点',leaf:true}]}][{id:1,text:'子节点',leaf:false}]ExtJS实用简明教程

-61-的，因此不可能每一次都产生leaf为false的节点，如果是叶子节点的时候，则需要把返回的JOSN对象中的leaf设置为true。如下所示：事件处理当然，仅仅能显示一棵树还不够，我们一般还需要在用户点击树节点的时候执行相应的东西，比如打开某一个连接，执行某一个函数等，这就需要使用到事件处理。比如下面的代码：执行上面的程序，当用户点击树控件中的任意节点时，都会弹出一个提示信息框，当用户点击c1这个子节点时，会弹出两次提示信息框。因为我们除了指定tree的click事件响应函数以外，另外又给node节点指定单独的事件响应函数。当然，如果只是要实现当点击树节点时跳到某一个指定url的功能则非常简单。看下面[{id:1,text:'子节点',leaf:true}]Ext.onReady(function(){varroot=newExt.tree.TreeNode({id:\"rootext:\"树的根\varc1=newExt.tree.TreeNode({id:\"c1ext:\"子节点\"});root.appendChild(c1);vartree=newExt.tree.TreePanel({renderTo:\"hello\root:root,width:100});tree.on(\"click\alert(\"您点击了\"+node.text);});c1.on(\"click\alert(\"您点击了\"+node.text);});});ExtJS实用简明教程

-62-的代码：执行程序，点击树节点，将会在浏览新窗口中打开节点中href指定的链接。9.2、TreeNode在ExtJS中，不管是叶子节点还是非叶子节点，都统一用TreeNode表表示树的节点。在ExtJS中，有两种类型的树节点。一种节点是普通的简单树节点，由Ext.tree.TreeNode定义，另外一种是需要异步加载子节点信息的树节点，该类由Ext.tree.AsyncTreeNode定义。看下面的代码：执行程序，点击树中的“根节点”则会一直发现树会尝试加载这个节点的子节点，由这Ext.onReady(function(){varroot=newExt.tree.TreeNode({id:\"root\href:\"http://www.easyjf.com\hrefTarget:\"_blankext:\"树的根\varc1=newExt.tree.TreeNode({id:\"c1\href:\"http://wlr.easyjf.com\hrefTarget:\"_blankext:\"子节点\"});root.appendChild(c1);vartree=newExt.tree.TreePanel({renderTo:\"hello\root:root,width:100});});Ext.onReady(function(){vartree=newExt.tree.TreePanel({renderTo:\"hello\root:newExt.tree.AsyncTreeNode({text:\"根节点\"}),width:100});});ExtJS实用简明教程

里没有指定树的加载器，所以“根节点”会变成一直处于加载的状态。如下图所示：对于普通的TreeNode来说，可以通过调用节点的appendChild、removeChild等方法来往该节点中加入子节点或删除子节点等操作。TreeNode与AsyncTreeNode可以同时使用，比如下面的代码：treedata.js中的内容仍然是：执行上面的程序可以得到一棵如下图所示的树：Ext.onReady(function(){varroot=newExt.tree.TreeNode({id:\"rootext:\"树的根\"});varc1=newExt.tree.TreeNode({text:\"子节点1\"})varc2=newExt.tree.AsyncTreeNode({text:\"子节点2\"});root.appendChild(c1);root.appendChild(c2);vartree=newExt.tree.TreePanel({renderTo:\"hello\root:root,width:300,loader:newExt.tree.TreeLoader({applyLoader:false,url:\"treedata.js\"})});});[{id:1,text:'子节点'}]ExtJS实用简明教程

-64-另外要在树以外的程序中得到当前选择的节点，可以通过TreePanel的getSelectionModel方法来获得，该方法默认返回的是Ext.tree.DefaultSelectionModel对象，DefaultSelectionModel的getSelectedNode方法返回当前选择的树节点。比如要得到树tree中中当前选择节点，代码如下：9.3、TreeLoader对于ExtJS中的树来说，树加载器TreeLoader是一个比较关键的部件，树加载器由Ext.tree.TreeLoader类定义，只有AsyncTreeNode才会使用TreeLoader。看下面的代码：首先我们使用Ext.tree.TreeLoader来初始化了一个TreeLoader对象，构造函数中的配置参数url表示获得树节点信息的url。然后在初始化根节点的时候我们使用的是AsyncTreeNode，在该节点中指定该节点的laoder为前面定义的loader。执行这段程序，在点击“根节点”时，会从服务器端指定root节点的子节点信息。TreeLoader严格来说是针对树的节点来定义的，可以给树中的每一个节点定义不同的TreeLoader，默认情况下，如果一个AsyncTreeNode节点在准备加载子节点的时候，如果该节点上没有定义loader，则会使用TreePanel中定义的loader作为加载器。因此，我们可以直接在TreePanel上面指定loader属性，这样就不需要给每一个节点指定具体的TreeLoader了。因此，上面的代码可以改成如下所示的内容:tree.getSelectionModel().getSelectedNode()Ext.onReady(function(){varloader=newExt.tree.TreeLoader({url:\"treedata.js\"});varroot=newExt.tree.AsyncTreeNode({id:\"rootext:\"根节点\loader:loader});vartree=newExt.tree.TreePanel({renderTo:\"hello\root:root,width:100});});ExtJS实用简明教程

-65-9.4自定义TreeLoader在ExtJS自己的TreeLoader中，当要实现从远程服务器端异步加载树节点信息的时候，都是通过请求服务器上的某一个URL来进行的，这个URL返回下面的信息：假如我们是直接通过类似DWR或EasyJWeb的远程脚本引擎在客户端直接调用服务器的业务方法，直接跳过了WEB（不需要Struts、JSP或其它Web层的代码）这一层，这时我们没有URL，这时该怎么办呢？这就需要使用到自定义的TreeLoader，下面我们通过一个实例来做简单的讲解。看服务器端的ITopicCategoryServiceloadCategory方法返回一个类型为Node的列表，也就是返回指定id的下级分类信节点信息，Node对应树节点的信息，代码如下：[{id:1,text:'AleafNode',leaf:true},{id:2,text:'AfolderNode',children:[{id:3,text:'AchildNode',leaf:true}]}]publicinterfaceITopicCategoryService{ListloadCategory(Longid);}publicclassNode{privateTopicCategorycategory;Node(TopicCategorycategory){this.category=category;}publicStringgetId(){returncategory.getId().toString();}publicbooleangetLeaf(){ExtJS实用简明教程

-66-Node在这里相当于一个简单适配器，其实就是把数据库中的日志分类实体适配成包树节点对象。把ITopicCategoryService发布成可供客户端远程调用，使用EasyJWeb的话引如下面三个js：使用DWR的话引入下面的两个js：这样我们可以在页使用下面的javascrpt来从服务器端获得某一个节点的子节点信息，代码如下：如何让ExtJS的树面板能通过这个远程web脚本方法topicCategoryService.loadCategory来加载异步加载树节点信息呢？其实很简单，跟一般的使用没什么两样，树面板TreePanel的代码如下：returncategory.getChildren().size()<1;}publicStringgetText(){returncategory.getName();}publicStringgetQtip(){returncategory.getName();}}functiontest(){topicCategoryService.loadCategory(1,function(ret){alert(\"一共有\"+ret.length+\"个子节点\");}}ExtJS实用简明教程

-67-然后区别是在loader部分，使用远程Web调用来加载树节点的loader，代码如下：再回顾一下传统的直接通过url加载树节点的TreeLoader代码，如下所示：区别在于，远程脚本调用方式加载树节点信息使用的是WebInvokeTreeLoader，需要通过fn属性来指定用于加载数据的远程方法，并在beforeload事件处理器设置参数远程方法调用的参数值。而传统的树节点加载器是Ext.tree.TreeLoader，需要指定一个url来获得json数据。WebInvokeTreeLoader是自定义的树加载器，代码其实比较简单，你可以自己写一个。本方案仅供参考，关于WebInvokeTreeLoader的源代码我已经传到了我用ExtJS开发的Blog示例网站上了，仅供VIP会员浏览，有兴趣的朋友可跟我联系。vartree=newExt.tree.TreePanel({autoScroll:true,animate:true,width:'100px',height:'300px',enableDD:true,containerScroll:true,loader:loaderroot:newExt.tree.AsyncTreeNode({text:'日志分类',id:'root'});});varloader=newWebInvokeTreeLoader({fn:topicCategoryService.loadCategory});loader.on(\"beforeload\l.args[0]=(node.id!='root'?node.id:\"-1\");});varloader=newExt.tree.TreeLoader({url:'/topicCategory.ejf?cmd=getCategory&pageSize=-1&treeData=true'});loader.on(\"beforeloader\loader.baseParams.id=(node.id!='root'?node.id:\"\");});__