JavaScript的Ext JS框架中的GridPanel组件使用指南

1 最简单的Grid Panel

Grid Panel是ExtJS的核心部分之一，通过Grid Panel可以对数据显示、排序、分组和编辑。Model和Store是Grid Panel处理数据的核心，每个Grid Panel都必须设置Model和Store。要创建Grid Panel，首先要定义Model，Model包括了Grid Panel所有需要显示的字段，相当于数据库中表字段的集合。Store可以看作是一行数据的集合或者是Model的实例集合，每个Store都包含一个或多个Model实例，Grid Panel显示的数据都存储在Store里面。Grid Panel通过Store获取数据并显示，Store则通过Proxy对数据进行读取和保存。下面创建一个Grid Panel用来显示用户的基本信息，包括用户名、邮箱、手机号(name、email、phone)，首先创建用户模型(User Model)。

接下来创建Store，Store是User的集合，包括多个User实例。

Model和Store都创建好之后，就可以创建Grid Panel了。

显示的字段，必须要和User Model中的字段一致 },{ text: 'Email Address',width: 150,dataIndex: 'email',hidden: true },{ text: 'Phone Number',flex: 1,dataIndex: 'phone' } ] });

最后创建的用户Grid Panel如图所示。

2 Grid Panel数据分组（Grouping）

只要在Store中设置groupField属性，就可以对Grid Panel显示的数据进行分组。假设公司有很多员工，需要对公司的员工在Grid Panel中按部门进行分组显示。首先在Store中设置groupField属性为department。

然后在Grid Panel中添加grouping Feature，实现分组显示效果。

分组显示效果如下图所示，点击这里查看官方分组显示代码。

3 Grid Panel分页显示

当数据比较多一页显示不完的时候，就需要对数据进行分页显示。Grid Panel可以通过Paging Toolbar和Paging Scroller两种方式实现分页显示显示，Paging Toolbar有上一页/下一页按钮，Paging Scroller是当Grid Panel滚动显示到底部的时候动态加载数据。要实现分页显示，首先要设置Store支持分页，在Store中设置pageSize，pageSize默认是25。在reader中设置数据总数量totalProperty，分页插件根据pageSize和totalProperty进行分页。下面的代码pageSize设置为4，totalProperty则从返回的json数据中total属性获取。

显示的数据数量 proxy: { type: 'ajax',url : 'data/users.json',reader: { type: 'json',root: 'users',//指定从json的哪个属性获取数据，如果不指定，则从json的跟属性获取 totalProperty: 'total' //总数据数量 } } });

假设json数据格式如下

Store的分页已经设置完毕，下面在Grid Panel中实现Paging Toolbar分页功能。

添加paging toolbar store: userStore,//把paging toolbar的Store设置成和Grid Panel的Store一样 dock: 'bottom',displayInfo: true }] });

Paging Toolbar的分页效果如下图所示，点击这里查看官方Paging Toolbar分页功能代码。

Paging Scroller的分页实现比较简单，只要在Grid Panel中设置如下代码即可，点击这里查看官方Paging Scroller分页功能代码。

分页插件 verticalScroller: 'paginggridscroller',// do not reset the scrollbar when the view refreshs invalidateScrollerOnRefresh: false,// infinite scrolling does not support selection disableSelection: true,// ... });

4 Grid Panel添加CheckBox

只要设置Grid Panel的selModel属性为Ext.selection.CheckBoxModel，点击这里查看官方代码实例。

BoxModel'),//设置Grid Panel的选择模式为CheckBox store: userStore,columns: ... });

5 综合示例

功能和Ext.grid.columnModel一样。与cm有一个就行 autoWidth:true width title border:false columnLines: true,renderTo //显示div标签的id animCollapse:false //True 表示为面板闭合过程附有动画效果 (默认为true,在类 Ext.Fx 可用的情况下). collapsible: true,//true 表示面板可以闭合 columnLines：true,//true 表示有格边框 loadMask:true //获取数据里时有等待界面 stripeRows: true,//双色表格 plugins：true,bbar:new Ext.PagingToolbar({ pageSize:10,store:store,//数据源 displayInfo:true,//为true时下面的才显示 displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条',emptyMsg:'没有记录' }),tbar:[{ text:'查询',icon:'/trade/images/delete.gif',cls:'x-btn-text-icon',handler:function(){win.show();} } })

<div class="jb51code">
<pre class="brush:js;">
//**
//PagingToolbar分页
//传到服务器数据 start开始查询位置， limit要查询多少条
//排序
//服务器 sort,dir
//**
var com = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),{header: "客户ID",width: 50,sortable: true,dataIndex: 'memid'},{header: "客户姓名",width: 75,dataIndex: 'memName'},{header:'姓别',width:50,dataIndex:'sex',align:'center',sortable:true,renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}}
{header: '跟踪号',width:150,dataIndex:'code'},{header: '日期',dataIndex: 'kd_time'}
]);

<div class="jb51code">
<pre class="brush:js;">
/***
grid tbar
样式
cls:'x-btn-text-icon' 添加
**/
EditorGridPanel
chickToEdit:1 //点击次数
ColumnModel 中要加editor editor:new Ext.form.TextField({
})
//获取修改后的数据
var storeEdit = grid.getStore(); //
var modified = storeEdit.modified.slice(0); //
Ext.each(modified,function(m){
alert(m.data.id); //数据就在m.data中 id 为字段名
})