extjs表格、树控件

蓝杰java讲习录只为不凡而来表格控件和树控件学习目标：1.掌握GridPanel、EditorGridPanel和TreePanel的用法2．掌握三种Store、TreeLoader的用法目录第三节Ext表格控件和树控件...........................................................................................................................11.表格控件..................................................................................................................................................21．1基本表格GridPanel....................................................................................................................21．2可编辑的表格EditorGridPannel..................................................................................................62．与服务器交互........................................................................................................................................93.数据存储Store.......................................................................................................................................103.1存放数据的类Record...................................................................................................................103．2Store数据存储器......................................................................................................................113．3DateReader数据读取器...........................................................................................................124DataProxy数据代理................................................................................................................................145.树控件TreePanel....................................................................................................................................165.1TreePanel基本应用......................................................................................................................165.2事件处理......................................................................................................................................185.3树加载器TreeLoader....................................................................................................................205.4自定义TreeLoader........................................................................................................................21任务和总结：............................................................................................................................................22蓝杰陈九龙QQ：897157611蓝杰java讲习录只为不凡而来．1基本表格GridPanelExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext,grid.ColumnModel定义，而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStore、GroupinStore等。我们看一个简单的使用表格控件的代码：Ext.onReady(function(){vardata=[[1,'任务管理系统','3D','],[2,'Blog系统','BJT','],[3,'Ext管理系统','3d','],[4,'中流网','ZLW',']];varstore=newExt.data.SimpleStore({data:data,fields:[id,name,organization,homepage]});vargrid=newExt.grid.GridPanel({renderTo:hello,title:NetJava表格测试,height:150,width:600,columns:[{header:项目名称,dataIndex:name},{header:开发团队,dataIndex:organization},{header:网址,dataIndex:homepage}],store:store,autoExpandColumn:2});});运行上面的代码，可以得到一个简单的表格如下：2蓝杰java讲习录只为不凡而来上面的代码中，第一行“vardata-…”用来定义表格中要显示的数据，这是一个[][]二维数组；第二行”varstore=…”用来创建一个数据存储，这是GridPannel需要使用配置属性，数据存储器Store负责把各种各样的数据（如二维数组、JSon对象数组、XML文本）等转换成ExtJS的数据记录集Record，关于数据存储器Store我们将会在下一节中作专门讲解。第三行”vargrid=newExt.grid.GridPannel(…)”负责创建一个表格，表格包含的列由columns配置属性来描述，columns是一个数组，每一行数据元素描述表格的一列信息。表格的列信息包含列头显示的文本（header）、列对应的记录集字段（dataIndex）、列是否可排序（sorable）、列的渲染函数（renderer）、格式化信息（format）等，在上面的列中只用到了header和dataIndex.下面我们再来看看表格控件的其它一些特性，修改一下上面的代码，内容如下：functionshowUrl(value){returnahref=+value++value+/a;}Ext.onReady(function(){vardata=[[1,'任务管理系统','3D','],[2,'Blog系统','BJT','],[3,'Ext管理系统','3d','],[4,'中流网','ZLW',']];varstore=newExt.data.SimpleStore({data:data,fields:[id,name,organization,homepage]});varcolM=newExt.grid.ColumnModel([{header:项目名称,dataIndex:name,sortable:true},{header:开发团队,dataIndex:organization,sortable:true},{header:网址,dataIndex:homepage,sortable:true,renderer:showUrl}]);vargrid=newExt.grid.GridPanel({renderTo:hello,title:NetJava表格测试,height:150,width:600,cm:colM,store:store,autoExpandColumn:2});});上面的代码直接使用Ext.grid.ColumnModel来创建表格的列定义信息，在各列中我们添加了sortable为true的属性，表示该列可以排序，另外，买一列的数据渲染方式还可以自己定义，比如上面的代码中，3蓝杰java讲习录只为不凡而来我们希望用户在表格中点击网址可以打开这些团队的网站，也就是给网址这一列添加了超连接，运行效果如下：在定义“网址”的时候加上renderer属性：renderer:showUrl。showUrl是一个自定义的函数，内容是根据传入的value参数返回一个包含a标签的html片段。自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息，只要是浏览器支持的html都可以。除了二维数组以外，表格还能显示其它格式的数据吗，这个是当然的，下面我们来看个例子，将数据定义为以下格式：vardata=[{id:1,name:'任务管理系统',organization:'3D',homepage:'},{id:2,name:'Blog系统',organization:'BJT',homepage:'},{id:3,name:'Ext管理系统',organization:'3D',homepage:'},{id:4,name:'中流网',organization:'ZLW',homepage:'}];也就是说数据变成了一维数组，数组中的每一个元