首页 / 脚本样式 / JavaScript / 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）。

Ext.define（"User", {extend: "Ext.data.Model",fields: [ "name", "email", "phone" ] }）; 

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

var userStore = Ext.create（"Ext.data.Store", {model: "User", //刚才创建的User Modeldata: [{ name: "Lisa", email: "lisa@simpsons.com", phone: "555-111-1224" },{ name: "Bart", email: "bart@simpsons.com", phone: "555-222-1234" },{ name: "Homer", email: "home@simpsons.com", phone: "555-222-1244" },{ name: "Marge", email: "marge@simpsons.com", phone: "555-222-1254" }] }）; 

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

Ext.create（"Ext.grid.Panel", {renderTo: Ext.getBody（）,store: userStore, //绑定上面创建的Storewidth: 400,height: 200,title: "Application Users",columns: [{text: "Name",width: 100,sortable: false,hideable: false,dataIndex: "name" //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。

Ext.create（"Ext.data.Store", {model: "Employee",data: ...,groupField: "department" //设置数据按照department分组 }）; 

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

Ext.create（"Ext.grid.Panel", {...features: [{ ftype: "grouping" }] }）; 

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


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属性获取。

Ext.create（"Ext.data.Store", {model: "User",autoLoad: true,pageSize: 4, //设置每页显示的数据数量proxy: {type: "ajax",url : "data/users.json",reader: {type: "json",root: "users", //指定从json的哪个属性获取数据，如果不指定，则从json的跟属性获取totalProperty: "total" //总数据数量}} }）; 

假设json数据格式如下

{"success": true,"total": 12,"users": [{ "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },{ "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },{ "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },{ "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }] } 

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

Ext.create（"Ext.grid.Panel", {store: userStore,columns: ...,dockedItems: [{xtype: "pagingtoolbar", //在Grid Panel中添加paging toolbarstore: userStore, //把paging toolbar的Store设置成和Grid Panel的Store一样dock: "bottom",displayInfo: true}] }）; 

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


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

Ext.create（"Ext.grid.Panel", {//使用Paging Scroller分页插件verticalScroller: "paginggridscroller",// do not reset the scrollbar when the view refreshsinvalidateScrollerOnRefresh: false,// infinite scrolling does not support selectiondisableSelection: true,// ... }）; 

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

Ext.create（"Ext.grid.Panel", {selModel: Ext.create（"Ext.selection.CheckboxModel"）, //设置Grid Panel的选择模式为Checkboxstore: userStore,columns: ... }）; 

5 综合示例

var grid = new Ext.grid.GridPanel（{store //数据源cm //Ext.grid.columnModelcolumns //功能和Ext.grid.columnModel一样。与cm有一个就行autoWidth:truewidthtitleborder:falsecolumnLines: true,renderTo //显示div标签的idanimCollapse: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（）;}} }） 

//********************************************** //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, sortable: true, 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: "日期", width:150, dataIndex: "kd_time"} ]）; 

 

/*********************************************** grid tbar 样式 cls:"x-btn-text-icon" 添加 **************************************************/ EditorGridPanelchickToEdit: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 为字段名 }） 

//获取grid数据 var selModel = grid.getSelectionModel（）; 获取选择模式 var record; if（！selModel.hasSelection（））{Ext.Msg.alert（"警告","请选择要修改的行！"）;return; } selModel.getSelections（）.length; //选择的行数record = selModel.getSelected（）; //获取选择行的数据 

（1）获取数据 :
单行 

id = record.get（"id"）; 

或者 

id = record.data.id; 

多行 

record[i].get（"ddd"） 

（2）删除数据 :

var obj = grid.getSelectionModel（）.getSelected（）; store.remove（obj）; grid.getView（）.refresh（）; 

（3）查询 

store.baseParams["memid"] = fb.form.findField（"memid"）.getValue（）; store.baseParams["start"] = 0; store.load（）; 

（4）添加一行列 :
Ext自己带的一个插件 
需要文件 RowExpander.js 

var expand = new Ext.ux.grid.RowExpander（{tpl : new Ext.Template（"<p>{address}</p>"） }）; 

在grid的columns中加 expand， 
并在grid属性中加 plugins: expand