Grid列表组件

Ext JS的Grid列表组件是功能强大且灵活的组件，不仅能方便滴处理后台数据，还能实现分页、编辑、统计等功能。

本章先从Grid的使用流程讲起，然后一步步引入其几大模块：列模式、选择模式、视图、分页等。一一进行分析。

一、认识Ext JS的Grid

展现数据和操作数据是网页中最重要的应用，HTML是通过table来实现的，但table列表数据有很多问题：数据样式的显示、数据分页、表列的排序、单元格的编辑等。

而Extjs的Grid组件解决了这些问题。

1、概述

Grid组件中有许多功能类，每个类都代表一个功能，如选择、拖拽等，这些类最终通过GridPanel类同意起来。

Ext.GridPanel类是所有类的中心，它通过集成Store、pagindToolbar、columnModel、GridView、RowSelectionModel等

来完成数据列表功能，即暗示它可以通过配置项(store,cm,sm,vie)从数据，表列，表行，表视图这4个方面来构建Grid组件。

2、如何创建GridPanel

构建Grid组件一般可以分为如下7个步骤：

01）定义数据源。定义数据源一般都是通过Extjs数据模型来进行的,

var render = new Ext.data.ArrayReader({},[

{name:'company'},

{name:'price',type:'float'},

{name:'change',type:'float'},

{name:'pctChange',type:'float'}]);

var data = [

['Altridk Group Inc',87.34,0.23,0.23],

['kevin',23,23,23]];

var ds = new Ext.data.Store({reader:reader,data:data});

02)定义columnModel。获得数据之后，接下来要做的就是想办法展现它。二维表是目前最好的展现方式之一。

要使用二维表，首先得定义表头，给出表列与数据列的对应关系，

var cm = new Ext.grid.ColumnModel([

{id:'company',header:'Company',width:40,dataIndex:'company'},

{header:'Price',width:20,dataIndex:'price'},

{header:'Change',width:20,dataIndex:'change'},

{header:'% Change',width:20,dataIndex:'pctChange'}]);

这里定义了4列，每列都通过dataIndex属性与上面代码中的数据列对应，建立这种对应关系是通过Ext.grid.ColumnModel类来实现的。它用来

定义表列的相关信息，如表头，列排序等。

03）定义SelectionModel。

SelectionModel即选择模式，在对列表数据进行操作之前，首先要选中需要操作的数据。当单击列表中某位置时，是

表明选中改行还是该单元格？

这就是选择模式要完成的任务。

var sm = new Ext.grid.RowSelectionModel({singleSelect:true});

定义选择模式不是必须的，因为Grid组件会根据不同类型的GridPanel类采用不同的默认模式。这里显示调用它，其目的是为了选择模式传入配置项，完成功能上的定制。

04）定义View。视图是列表数据最终显示出来的二维表结构，对于不同类型的类别，其展现结构、样式不尽相同，这得通过视图配置项来进行定制。

var view = new Ext.grid.GridView({forceFit:true});

视图也不是必须的。

05）定义pagingBar.分页栏用来定义数据分页操作，分页是数据列表中最重要且常用的功能，

var pagingBar = new Ext.PagingToolBar({

pageSize: 15, store:store,

displayMsg:'共有{2},显示｛0｝-｛1｝'});

06)定义GridPanel。定义了前面5步后，现在就可以把它们组装起来。实现组装的就是GridPanel类，因为是Panel类的子类，可以通过它来配置所有功能，

var grid = new Ext.grid.GridPanel({

ds:ds,

cm:cm,

sm:sm,

view:view,

bbar:pagingBar,

renderTo:'grid' width:600,height:300});

07)载入数据。生成GridPanel实例之后，很多用户都会忘记最后一步：载入数据。

ds.load({params:{start:0,limit:25}});

通过Store载入数据，它会自动地更新列表内容，数据载入可以在GridPanel类构建之前进行，也可以在其之后进行。