ExtJs grid(一)简介-CSDN博客

转自:http://yahaitt.iteye.com/blog/234379

grid是由store、cm,sm(选择模型)、gridView组成。

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

grid的各列头信息是由ColumnModel来定义的。

grid中的sm(selModel)包括CheckboxSelectionModel,RowSelectionModel,CellSelectionModel三种选择模式

grid的实际数据列表是通过Store来展现的。

grid的显示是靠gridView来显示的.

grid的实例化如下：

    Js代码 
    
  
 vargrid=newExt.grid.GridPanel({ 
 cm:cm, 
  sm:sm, 
 store:store 
 ... 
 }); 

相关图片示例如下：

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

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

    Js代码 
    
  
 varcm=newExt.grid.ColumnModel([ 
 ... 
 ]); 

SelModel用于选择的模式:

   Js代码 
   
 

varsm=newExt.grid.RowSelectionModel({
...
});

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

    Js代码 
    
 varfields=["id","name","email","sex","age"];

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

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

    Js代码 
    
  
 vardata=[...]; 
 varstore=newExt.data.Store({ 
 data:data,//此处为与数据结构定义相对应的数据 
 fields:fields 
 ... 
 }); 

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

    Js代码 
    
  
 varcm=newExt.grid.ColumnModel([{ 
 header:"id", 
 dataIndex:"id"//对应于grid的store的fields中的id 
 },{ 
 header:"姓名", 
 dataIndex:"name"//对应于grid的store的fields中的name 
 },{ 
 header:"email", 
 dataIndex:"email"//对应于grid的store的fields中的email 
 },{ 
 header:"性别", 
 dataIndex:"sex"//对应于grid的store的fields中的sex 
 },{ 
 header:"年龄", 
 dataIndex:"age"//对应于grid的store的fields中的age 
 } 
 ]); 
 