JavaScript的ExtJS框架中表格的编写教程

extjs中表格的特性简介
表格由类ext.grid.gridpanel定义，继承自ext.panel，xtype为grid
表格的列信息由ext.grid.columnmodel定义
表格的数据存储器由ext.data.store定义，根据解析数据的不同，数据存储器可具体分为如下几种：

jsonstore，simplestore，groupingstore…

一个表格的基本编写过程：

1、创建表格列模型

2、创建数据数组

3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式

arrayreader的mapping用来设置列的排列顺序

4、创建gridpanel，装配columnmodel和store

另外获取远程数据可以使用scripttagproxy,如下所示

表格的常用属性功能

渲染表格，为表格设置特殊样式
只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由ext自动传递）的参数的样式即可，即在返回value之前拼装上相应的html和css或者js响应事件。

自动显示行号，只要在创建cm时创建一个rownumberer就可以了

删除列

刷新表格

为表格添加复选框
需要使用checkboxselectionmodel
selectionmodel sm在使用时要放到cm和表格中

通过rowselectionmodel设置只选择一行：

使用选择模型获取数据

表格视图
从mvc的思想来看表格控件：
* ext.data.store可看做模型
* ext.grid.gridpanel可看做控制器
* ext.grid.gridview可看做视图
* 一般gridview由gridpanell自动生成，如果想设置gridview的属性时，可以通过ext.grid.gridpanel的getview()获得视图实例

使用gridpanel的viewconfig在创建表格时设置gridview的初始化参数

为表格添加分页工具条
* 可以使用gridpanel的bbar属性，并创建ext.pagingtoolbar分页工具条对象
* 注意，如果配置了分页工具条，store.load()就必须在构造表格以后执行。

从后台脚本获取分页数据

使用httpproxy传递请求，获取服务器的json数据，交给jsonreader解析

如果想让分页工具条显示在表格的顶部，可以使用gridpanel的tbar属性设置添加工具条

让extjs在对返回的数据进行分页

* 需要在页面中引入examples/locale目录下的pagingmemoryproxy.js文件
* 再使用pagingmemoryproxy设置代理

可编辑表格控件editorgrid的使用

制作一个简单的editorgrid的步骤：

1、定义列columnmodel，在里面添加editor属性

2、准备一个数组

3、创建ext.data.store，设置内存代理，设置arrayreader解析数组

4、加载数据，创建editorgridpanel

为可编辑表格添加和删除数据

1、使用record的create方法创建一个记录集myrecord,myrecord相当于一个类

2、创建editorgridpanel面板，在属性tbar中创建ext.toolbar

为可编辑表格保存修改的结果

在上面例子的基础之上，添加一个保存按钮

另外store可以设置属性prunemodifiedrecords: true。这样，每次remove或load操作时store会自动清除modified标记，可以避免出现下次提交时还会把上次那些modified信息都带上的现象。

限制表格输入的数据类型

numberfield

combobox

datefield

属性表格控件propertygrid的使用
是在editorgrid的基础上开发的更智能的高级表格组件

禁用propertygrid编辑功能的方法

根据表格的name获取value

extjs中实现嵌套表格
先看效果：

代码如下：

其中使用到的"rowexpander.js"为extjs官方示例中自带的。

实现这个嵌套表格要注意两点技巧：
1.提供给外层表格的datastore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。

使用数组集中record对象的json属性来获取以细节区数据

2.在rowexpander的 expand事件中添加嵌套表格.