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

1最简单的网格面板网格面板是ExtJS的核心部分之一，通过它可以显示、排序、分组和编辑数据。模型和存储是网格面板处理数据的核心，每个网格面板都必须设置模型和存储。要创建网格面板，我们必须首先定义一个模型，该模型包括需要在网格面板中显示的所有字段，它相当于数据库中的一组表字段。存储可以被视为一行数据的集合或模型实例的集合。每个存储包含一个或多个模型实例，网格面板显示的数据存储在存储中。网格面板通过存储获取和显示数据，而存储通过代理读取和保存数据。接下来，创建一个网格面板来显示用户的基本信息，包括用户名、电子邮件和电话号码。首先，创建一个用户模型。

Ext.define('User '，{ extend: 'Ext.data.Model '，fields: [ 'name '，' email '，' phone ']})；接下来，创建一个存储，它是用户的集合，包括多个用户实例。

用户存储=ext.create ('ext.data.store '，{model:' user '，//刚刚创建的用户模型data :[{ name : ' Lisa '，email:' [email protected]'，phone: '555-111-1224' }，{ name: 'Bart '，email 3: '[email protected]'，phone 3: ' 555-222-12330 '创建模型和存储后，您可以创建网格面板。

Ext.create ('ext.grid.panel ')，{renderto:ext.getbody()，store3360user store，//绑定上面创建的storewidth : 400和height : 200。title:“应用程序用户”，列： [ { text:“名称”，width: 100，sortable: false，hideable: false，dataindex:“名称”//gridpanel中显示的字段必须与用户模型中的字段一致}，{ text:“电子邮件地址”，width : 150，dataindex3360“电子邮件”，hidden: true }，{ text最终创建的用户网格面板如图所示。

2网格面板数据分组(分组)只要在存储中设置了groupField属性，就可以对网格面板显示的数据进行分组。假设公司有很多员工，公司的员工需要在网格面板中按部门分组显示。首先将“组字段”属性设置为商店中的部门。

Ext.create ('ext.data.store '，{model:' employee '，data:groupfield:“部门”//将数据设置为按部门分组})；然后在网格面板中添加分组功能，实现分组显示效果。

Ext.create('Ext.grid.Panel '，}.features :[{ ftype : ' group ' }]})；分组显示效果如下图所示。点击此处查看官方分组显示代码。

3网格面板分页显示当有多个数据可以显示一页时，需要分页显示数据。网格面板可以通过分页工具栏和分页滚动条实现分页显示。分页工具栏有上一个/下一个按钮，当网格面板滚动到底部时，分页滚动器会动态加载数据。要实现分页显示，首先设置商店支持分页，并在商店中设置页面大小。默认页面大小为25。在阅读器中设置总数据量totalProperty，根据pageSize和totalProperty设置分页插件页面。下面的代码pageSize设置为4，totalProperty从返回的json数据中的total属性获得。

Ext.create ('ext.data.store '，{model:' user '，autoload: true，pagesize: 4，//设置每页显示的数据数量proxy: {type: 'ajax '，URl : ' data/user。json '，reader : {type:' json '，root:' users '，//指定从json的哪个属性获取数据，如果没有指定，totalproperty : ' total '//total data quantity } })；假设json数据格式如下。

{ 'success': true，' total': 12，' users': [ { 'name': 'Lisa '，' email': '[emailprotected]，' phone': '555-111-1224' }，{ 'name': 'Bart '，' email': '[emailprotected]，' phone ' 3: ' 555-222-1234的分页已经设置完毕，下面在网格面板中实现分页工具栏分页功能。

Ext.create('Ext.grid.Panel '，{ store: userStore，columns:docket items :[{ xtype : ' pagingtoolbar '，//在网格面板中添加分页工具栏store: userStore，//把分页工具栏的商店设置成和网格面板的商店一样dock: 'bottom '，display info : true }]})；分页工具栏的分页效果如下图所示，点击这里查看官方分页工具栏分页功能代码。

分页滚动条的分页实现比较简单，只要在网格面板中设置如下代码即可，点击这里查看官方分页滚动条分页功能代码。

Ext.create('Ext.grid.Panel '，{ //使用分页滚动条分页插件verticalscroller : '分页gridscroller '，//当视图刷新时不要重置滚动条无效rollerOnRefresh: false，//无限滚动不支持选择disableSelection: true，//.});四网格面板添加检验盒只要设置网格面板的selModel属性为Ext.selection.CheckboxModel，点击这里查看官方代码实例。

Ext.create('Ext.grid.Panel '，{ selmodel : ext。创建(' ext。选择。复选框型号')，//设置网格面板的选择模式为复选框存储：用户存储，列3360.});5综合示例

var grid=new ext。网格。网格面板({ store//数据源cm//ext。网格。列模型列/功能和Ext.grid.columnModel一样。与厘米有一个就行自动宽度：真实宽度标题边框：假列线：真，渲染到//显示差异标签的id:animclapse : false//True表示为面板闭合过程附有动画效果（默认为没错，在类延伸文件系统外汇(外汇的缩写)可用的情况下). collapsible: true，//true表示面板可以闭合列线：真，//真表示有格边框loadMask:true //获取数据里时有等待界面stripeRows: true，//双色表格插件：true，bbar:new Ext .PagingToolbar({ pageSize:10，store:store，//数据源displayInfo:true，//为真实的时下面的才显示显示Msg: '显示第{0} 条到{1} 条记录，一共{2} 条，emptyMsg: '没有记录})，tbar:[{ text: '查询，图标： '/交易/图片/删除。gif '，cls:'x-btn-text-icon '，handler : function(){ win。show()；} } })/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *//分页工具栏分页//传到服务器数据开始开始查询位置，极限要查询多少条//排序//服务器sort，dir/* * * * * * * * * * * * * * * * * * * * * * * * * * * * var com=new ext。网格。列模型([新扩展名。网格。rownumber er()，{header: '客户'身份证'，宽度： 50,可排序：真的，数据索引： 'memid'}，{header: '客户姓名，width: 75，sortable: true，dataIndex: 'memName'}，{header: '姓别，width:50，dataIndex:'sex '，align:'center '，sortable:true，render : function(v){ return(v==' 1 ')？img src=' http : images/user _ suite。png ' ' : ' img src=' http : images/user _女主。png“”；}} {header: '跟踪号，宽度：150，数据索引： '代码' }，标题： '日期，width:150，data index : ' KD _ time ' }])；/*******************网格微型兵营样式cls :"x-BTN-文本-图标"添加* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * editorgridppanel chiktoedit :1//点击次数ColumnModel中要加编辑器编辑器：新增Ext。形式。TextField({ })//获取修改后的数据var storededit=grid。getstore()；//var modified=storededit。已修改。切片(0)；//Ext .每个(已修改，函数{警报(m .数据。id)；//数据就在m。数据中编号为字段名}) //获取格子数据var sel模型=网格。getselectionmodel()；获取选择模式风险值记录；if(！selModel.hasSelection()){ Ext .Msg.alert('警告','请选择要修改的行!');返回；} selModel.getSelections().长度；//选择的行数记录=sel模型。getselected()；//获取选择行的数据(1)获取数据：单行

id=记录。get(' id ')；或者

id=记录。数据。id；多行

记录[i].get('ddd') (2)删除数据：

var obj=grid.getSelectionModel().getSelected()；商店。移除(obj)；grid.getView().刷新();(3)查询

商店。BaSeparams[' memid ']=FB。形式。FindField(' memid ').getValue()；商店。base params[' start ']=0；商店。load()；(4)添加一行列：分机自己带的一个插件需要文件RowExpander.js

var expand=new Ext。UX。网格。Rowexpander({ TPL :新Ext .模板(' p { address }/p ')}；在格子的列中加扩展，并在格子属性中加plugins:展开