Ext表格控件和树控件

来源：互联网发布：答题软件游戏编辑：程序博客网时间：2024/05/21 18:00

1. 表格控件

1.2 可编辑的表格 EditorGridPannel

2与服务器交互

3. 数据存储 Store

3.1 存放数据的类 Record

3.2 Store 数据存储器

3.3 DateReader 数据读取器

4 DataProxy 数据代理

5. 树控件 TreePanel

5.2 事件处理

5.3 树加载器 TreeLoader

5.4 自定义 TreeLoader

1. 表格控件

1.1基本表格 GridPanel

ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑

等实用功能。
表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含
列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext,grid.ColumnModel定义，而表格的

数据存储器由Ext.data.Store 定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStore、GroupinStore等。我们看一个简单的使用表格控件的代码：

Ext.onReady(function(){
var data=[
    [1, '任务管理系统', '3D','www.renwu.com'],
    [2, 'Blog系统', 'BJT','www.blog.org'],
    [3, 'Ext管理系统', '3d','www.Extrw.com'],
    [4, '中流网', 'ZLW','www.zlweb.cn']
];
var store=new Ext.data.SimpleStore({
    data:data,
    fields:["id","name","organization","homepage"]
});
var grid = new Ext.grid.GridPanel({
    renderTo:"hello",
    title:"NetJava表格测试",
    height:150,
    width:600,
    columns:[{header:"项目名称",dataIndex:"name"},
      {header:"开发团队",dataIndex:"organization"},
          {header:"网址",dataIndex:"homepage"}],
    store:store,
    autoExpandColumn:2
});

运行上面的代码，可以得到一个简单的表格如下：

上面的代码中，第一行“var data-…”用来定义表格中要显示的数据，这是一个[][]二维数组；第二行”var
store=…”用来创建一个数据存储，这是GridPannel需要使用配置属性，数据存储器Store负责把各种各样
的数据（如二维数组、JSon对象数组、XML文本）等转换成ExtJS的数据记录集Record，关于数据存储器
Store我们将会在下一节中作专门讲解。第三行”var grid=new Ext.grid.GridPannel(…)”负责创建一个表格，
表格包含的列由columns配置属性来描述，columns是一个数组，每一行数据元素描述表格的一列信息。
表格的列信息包含列头显示的文本（header）、列对应的记录集字段（dataIndex）、列是否可排序
（sorable）、列的渲染函数（renderer）、格式化信息（format）等，在上面的列中只用到了header和
dataIndex.

下面我们再来看看表格控件的其它一些特性，修改一下上面的代码，内容如下：

上面的代码直接使用Ext.grid.ColumnModel来创建表格的列定义信息，在各列中我们添加了sortable为
true的属性，表示该列可以排序，另外，买一列的数据渲染方式还可以自己定义，比如上面的代码中，
我们希望用户在表格中点击网址可以打开这些团队的网站，也就是给网址这一列添加了超连接，运行效
果如下：

在定义“网址”的时候加上renderer属性：renderer:showUrl。showUrl是一个自定义的函数，内容是根
据传入的value参数返回一个包含<a>标签的html片段。自定义的列渲染函数可以实现在单元格中显示自
己所需要的各种信息，只要是浏览器支持的html都可以。

除了二维数组以外，表格还能显示其它格式的数据吗，这个是当然的，下面我们来看个例子，将数
据定义为以下格式：

var data=[{id:1,
name:'任务管理系统',
organization:'3D',
homepage:'http://www.renwu.com'},
{id:2,
name:'Blog系统',
organization:'BJT',
homepage:'http://www.renwu.com'},
{id:3,
name:'Ext管理系统',
organization:'3D',
homepage:'http://www.Extrw.com'},
{id:4,
name:'中流网',
organization:'ZLW',
homepage:'http://www.zlweb.cn'}
];

也就是说数据变成了一维数组，数组中的每一个元素是一个对象，这些对象包含"id"，
"name"，"organization"，"homepage" 等属性，要让表格上显示上面的数据，只要将存储器store 改为
Ext.data.JsonStore即可，如下：

var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});

上面的代码执行的结果与前面的一样。另外，表格同样能显示xml格式的数据，将上面的数据存放成
store.xml文件，如下：

<?xml version="1.0" encoding="UTF-8"?>
<database>
    <row>
      <id>1</id>
      <name>任务管理系统</name>
      <organization>3D</organization>
      <homepage>http://www.renwu.com</homepage>
    </row>
    <row>
      <id>2</id>
      <name>Blog系统</name>
      <organization>BJT</organization>
      <homepage>http://www.renwu.com</homepage>
    </row>
    <row>
      <id>3</id>
      <name>Ext管理系统</name>
      <organization>3D</organization>
      <homepage>http://www.Extrw.com</homepage>
    </row>
    <row>
      <id>4</id>
      <name>中流网</name>
      <organization>ZLW</organization>
      <homepage>http://www.zlweb.cn</homepage>
    </row>
</database>

将js代码数据存储器部分改为：

});

Store.load()是用来加载数据，执行上面的代码产生的表格与前面的完全一样。