ExtJs中关于grid和store的应用分析（一）

第一部分：阐述grid与store的关系、gird中的ColumnModel与store中的fields的关系。

grid，即列表，他的核心功能就是用来展现数据列表，包括列表各列的头信息和实际数据。

grid的各列头信息是由ColumnModel来定义的。
grid的实际数据列表是通过Store来展现的。

grid的实例化如下：

Js代码

1. var  grid =  new  Ext.grid.GridPanel({   
2.   cm:cm,   
3.   store:store   
4.   ...   
5. });  

var grid = new Ext.grid.GridPanel({
  cm:cm,
  store:store
  ...
});

相关图片示例如下：


ColumnModel中有两个非常重要的配置选项：header和dataIndex,
header就是列头的文本信息，是个字符串。
dataIndex是store中对应的数据结构定义，即对应于fields中各项的name值。

ColumnModel的构造函数接收的是数组类型的参数。用于一次性创建多个列信息。
如下：

Js代码

1. var  cm =  new  Ext.grid.ColumnModel([   
2.   ...   
3. ]);  

var cm = new Ext.grid.ColumnModel([
  ...
]);

下面我们再看一下Store，即数据存储器。
Store由数据结构定义和数据组成。
数据结构定义的最简单的模式如下：

Js代码

1. var  fields = [ "id" , "name" , "email" , "sex" , "age" ];  

var fields = ["id","name","email","sex","age"];

只标识了各名称。就像创建数据库表结构一样，可以只创建表中各字段的名称。

因此最简单的数据存储器如下：

Js代码

1. var  data = [...];   
2. var  store =  new  Ext.data.Store({   
3.   data:data, //此处为与数据结构定义相对应的数据   
4.   fields:fields   
5.   ...   
6. });  

var data = [...];
var store = new Ext.data.Store({
  data:data,//此处为与数据结构定义相对应的数据
  fields:fields
  ...
});

因为ColumnModel的dataIndex配置选项是对应于store中的数据结构定义fields，
因此可以如下实例化ColumnModel:

Js代码

1. var  cm =  new  Ext.grid.ColumnModel([{   
2.     header: "id" ,   
3.     dataIndex: "id" //对应于grid的store的fields中的id   
4.   },{   
5.     header: "姓名" ,   
6.     dataIndex: "name" //对应于grid的store的fields中的name   
7.   },{   
8.     header: "email" ,   
9.     dataIndex: "email" //对应于grid的store的fields中的email   
10.   },{   
11.     header: "性别" ,   
12.     dataIndex: "sex" //对应于grid的store的fields中的sex   
13.   },{   
14.     header: "年龄" ,   
15.     dataIndex: "age" //对应于grid的store的fields中的age   
16.   }   
17. ]);