大家好，继上次的treepanel之后，今天给大家介绍gridpanel，gridpanel也是在extjs编程中出现频率高的一种组件，是必须要掌握的，当然，gridpanel比treepanel要复杂的多，基本上能实现excel中大部分基本功能，功能相当强大。
先上张截图吧，一睹grid的芳容（这是未经过处理的最基本的grid界面）
grid的实现包括model、store和view三个层面。
从model开始，先贴代码再讲解：
Ext.define('eduSys.Course.model', {
extend : 'Ext.data.Model',
// idProperty : 'name',
fields : [
{name : 'coursesGuid', type : 'string'},
{name : 'code', type : 'string'},
{name : 'name', type : 'string'},
{name : 'period', type : 'int'}
]
});
代码的一开始，先定义一个model类，名字自己取，然后就是model里的键值对属性赋值，首先最重要的就是这个自定义的类要继承自Ext.data.Model，用extend属性来表示，再就是这个表格的基本属性，即表格每一列代表的含义，用field属性来表示，field是一个数组类型，里面存放各个列属性对象，每个对象里面要定义对象的名字（name）和类型（type），便于与后面的store层进行连接。至于idProperty（可有可无）这个属性后面讲解。这样model就基本写好了，很简单吧。
下面store层，代码如下：
Ext.define('eduSys.KnowledgeCourse.store', {
extend : 'Ext.data.Store',
model : 'eduSys.Course.model',
storeId : 'knowledgeCourseStore',
pageSize : 5,
proxy : {
type : 'ajax',
url : '../../KnowledgeUnitServlet',
extraParams: {
guid : document.location.search.split('=')[1],
cmd : 'getCourses'
},
reader : {
type : 'json'
}
},
/* sorters : [{
property : 'name',
direction : 'ASC'
}],*/
autoLoad : {start : 0, limit : 5}
});
store层也是自定义一个类，继承自Ext.data.Store，然后这里也是定义model，就是前面写的model层，model的赋值即前面写的model层的名称，然后最主要的是proxy，定义从后台去取数据，然后加载到grid 中，proxy中url好说，extraParams添加额外的参数传到后台，已json的形式读取数据。store中的autoload属性也需要赋值，代表程序什么时候像后台发送请求加载数据，可以赋boolean/Object,默认的是false，默认不发送请求，但可以在程序中可以通过grid的getStore( )函数拿到store对象然后调用load函数，然后系统就会像后台发送定义的proxy里的内容并加载，若手动设置为true，表示一开始就请求数据。上面代码赋值的是一个对象，用于分页用的。
当然，store也可以装载已经定义好的数据集，设置store的data属性，里面存放对象数组，键值对与model相对应，则表格自动填充这些数据，如下：
data : [
{code : 'OS1', name : '万俟辉夜1', period : 32},
{code : 'OS2', name : '万俟辉夜2', period : 48},
{code : 'OS3', name : '万俟辉夜3', period : 60},
],
最后就是view层的代码实现了:
Ext.define('eduSys.KnowledgeCourse.grid', {
extend : 'Ext.grid.Panel', //继承自Ext.grid.Panel
alias : 'widget.knowledgeCourseGrid', //取别名knowledgeCourseGrid
title : '课程', //表格标题
frame : true,//窗口化，即让界面变的饱满
selType : 'cellmodel',//设置单元格选中方式，默认为rowmodel，行选择
enableKeyNav : true,//允许键盘操作，即上下左右移动选中点
forceFit : true,//自动填充，即让所有列填充满gird宽度
config : [ //预先配置
GridDoActionUtil = Ext.create('Ext.Util.GridDoActionUtil'), //操作util类，这里可不管
myStore = new eduSys.KnowledgeCourse.store() //定义grid的store，即前面定义的store
],
columns : [ //关键部分，定义每一列的属性
{
text : '编号', //定义该列的标题名称
dataIndex : 'code', //对应model中的列属性
align : 'center', //居中显示
editor : {xtype : 'textfield'} //定义该列可以编辑，编辑框形式
},
{
text : '名称',
dataIndex : 'name',
align : 'center'
},
{
text : '学时',
dataIndex : 'period',
align : 'center'
},
{ //这一列大家看看就行了，是actioncolumn相关操作
xtype : 'actioncolumn',
align : 'center',
html : '<div style="margin-top: 4px;">详情</div>',
items: [{
icon : '../../images/view.png',
handler:
this.GridDoActionUtil.doDetail
}]
}
],
tbar : [ //定义工具栏，上面可以存放各种组件
{
xtype : 'combobox', //放一个combobox，用法以后再介绍
id : 'courseCombo',
store : new eduSys.Course.comboStore(),
queryMode : 'remot',
valueField : 'coursesGuid',
displayField : 'name',
editable : false
},
{xtype : 'button', text : '增加', iconCls : 'edu_add',
handler : function(btnObj) {
//dosomething();
}
}, // 放一个button按钮，定义它的样式（iconCls），点击响应方式（handler）
{xtype : 'button', text : '删除', iconCls : 'edu_remove',
handler :
this.GridDoActionUtil.doRemove
}
],
bbar : { //定义底部工具栏
xtype : 'pagingtoolbar', //分页工具条
store : this.myStore, //数据集跟grid的数据集一样
displayInfo : true //是否显示数据集信息
},
selType : 'checkboxmodel', //设置前面有多选框选项
multiSelect : true, //可以多选
store : this.myStore //定义grid的store，即前面写的store
});
view层的信息量就比较大了，所以基本信息都在代码里添加注释，应该看的还比较清楚，有的属性有不同的配置，大家可以在官网api上查找该属性，上面有详细的解释，鉴于上面代码已经可以代表大部分的需求，这里就不在多说。
好了，上面代码基本上能实现大部分对于表格的要求了，另外gird还有其他增强功能，比如拖拽、分组等等，每一列还有很多其他的属性进行设置，比如常见的render（渲染）、format（格式化）等等，今天由于时间原因就不写了，以后要是有时间再写一篇gird的增强篇，在这里像大家致歉。
贴一下grid的增加、删除、保存行的操作代码，比较简单。
doAdd : function(grid, modelObj) {
if(!(grid && modelObj)) {
Ext.Msg.alert('error','参数传递不正确!!!');
return;
}
var store = grid.getStore();
//得到目前表格的数据集合的长度
var storeCount = store.getCount();
//得到编辑插件
var edit = grid.editingPlugin;
//得到数据模型
var model = store.model;
var eduObj = new model(modelObj);
store.insert(storeCount,eduObj);
},
doRemove : function(grid) {
var data = grid.getSelectionModel().getSelection();
if(data.length == 0) {
MsgTip.msg("提示","请选中项删除!!!",true);
} else {
var st = grid.getStore();
Ext.Array.each(data, function(record) {
st.remove(record);
});
}
},
doSave : function(grid) {
if(!grid) {
Ext.Msg.alert('参数传递不正确!!!');
return;
}
//得到数据集合
var store = grid.getStore();
//records 被你修改过的数据
var records = store.getUpdatedRecords();
var data = [];
Ext.Array.each(records, function(model) {
data.push(model.data);
});
if(data.length > 0) {
Ext.Ajax.request({ //ajax后台传输数据
url : '要传的url',
params : {data : "[" +data.join(',')+ "]"},
method : 'POST',
timeout : 4000,
success : function(response,opts) {
//dosomething();
//取消小箭头
model.commit();
}
});
}
},
下面说一下大家普遍遇到的grid保存中store.getUpdatedRecords();拿到数据为空的问题，我也是在上面纠结了一段时间，觉得有必要在这把解决方案提出来。
grid的model层有一个属性：idProperty ，默认是id，这个属性就是grid所有列的主属性，相当于数据库中的主键定义，是不可缺少的，所以当你的model中配置没有id基本字段的时候，extjs内部的函数如getUpdatedRecords();就拿不到行的句柄（就用大家都懂的句柄这个词吧），所以取出来的值为空，解决方案就是配置idProperty为你定义的字段中一个，这样就解决了。
可是，有的兄台可能碰到跟我一样的问题，我的表格是可以新添加行的，用store的insert( Number index, Ext.data.Model[] records )函数添加新的一行，这个添加的model中每个属性都是空，但是，idProperty也配置了，结果拿出来的东西还是为空，我就纳闷了，怎么还是行不通，最后经过慢慢对比调试，终于发现了根本问题，在新增的一行中idProperty设置的属性必须要赋值，就像主键不能为空一样，经过赋值后的model对象插入到gird中后再调用getUpdatedRecords(); 就没有问题了，能正常拿出更改的值。
最后说一下grid的分页组建的实现细节。
在store层的定义中就定义了pageSize表示每一页的行数，autoLoad中定义一个对象（如上面store中的autoLoader），上面表示最开始的起始位置和请求个数，这样在往后台请求的URL中就增加了两个请求参数start和limit，按上面代码就是添加了start=0&limit=5，这样后台就可以接受参数进行处理，那么上一页下一页又是怎么处理的呢，在bbar中定义了分页组建，当点击下一页的按钮时，extjs会自动像后台发送一个URL请求，与proxy是同一个url请求，同样的会添加两个请求参数start和limit，只是这时的start值就是当前的值加上（下一页）或者减去（上一页）pageSize大小，在后台进行处理就行了。
最后的最后，本文如果写的有什么不足，希望大家与我交流，共同学习，共同进步。。。。。。。。。
分享到：
相关推荐
在EXTJS中，GridPanel是一种常用的组件，用于展示表格数据。在实际应用中，我们经常需要在GridPanel底部显示一行“合计”行，以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...
4. 实例化GridPanel：配置GridPanel的各种属性，如高度、宽度、是否可拖动列等，然后将Store和ColumnModel传递给GridPanel。 5. 渲染GridPanel：将GridPanel添加到容器中，完成渲染。 在实际应用中，GridPanel还...
ExtJS表格面板（GridPanel）是Sencha Ext JS框架中的一个核心组件，它用于展示大量结构化数据。在本文中，我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例，以及与其相关的源码和工具。 首先，让我们...
GridPanel 是 ExtJS 中的核心组件之一，它提供了一种高效、可定制的方式来展示大量结构化数据。在这个主题中，我们将深入探讨 GridPanel 的关键特性和使用方法。 1. **GridPanel 基本结构**： GridPanel 包含了行...
ExtJS的GridPanel导出excel文件,方便快捷易懂!
GridPanel则是ExtJS中的表格视图组件，它可以展示大量的数据，并提供排序、筛选、分页等功能。在集成TreePanel和GridPanel时，可能涉及到的概念有：将TreePanel的节点与GridPanel的数据关联，实现点击树节点时动态...
在ExtJs中，GridPanel是用于展示数据的常用组件，它可以提供丰富的功能，如排序、分页、筛选等。在实际应用中，我们经常需要监听用户的交互行为，比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...
在本文中，我们将深入探讨ExtJS4中的GridPanel样式及其选择模式。GridPanel是ExtJS框架中用于展示数据的一种重要组件，它允许用户以表格形式查看、操作和管理大量信息。 首先，我们来看一个简单的GridPanel示例。在...
EXTJS的GridPanel是其组件库中的核心组件之一，用于展示数据网格，广泛应用于Web应用的数据展示。在EXTJS中，ColumnModel是用来定义GridPanel列结构和行为的关键部分。这篇博客"EXTJS_GridPanel_ColumnModel_列的...
GridPanel是ExtJs中的核心组件之一，它提供了丰富的功能来展示和操作表格数据。你可以通过配置列、排序、过滤、分页等功能来定制你的表格。GridPanel通常与Store配合使用，Store负责管理数据，而GridPanel负责展示...
4. **高级表格和网格**：EXTJS4的GridPanel组件提供强大的数据展示和操作功能，支持分页、排序、过滤、编辑等功能，同时可与Ext.data.Model进行紧密集成，实现数据的动态加载和保存。 5. **图表和图形**：EXTJS4...
后来公司让改变一个Gridpanel的展现方式，要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久，也没有找到框架的相应控制方法，然后在网上找了很久，也没有找到有人给去示例，无奈就只能自己写JS来控制...
在ExtJS 4.0版本中，GridPanel组件是其核心特性之一，它允许开发者创建数据密集型的表格展示，提供了丰富的功能和定制选项。这篇内容将深入探讨GridPanel在ExtJS 4.0中的应用及其相关知识点。 首先，我们来看...
在深入探讨ExtJS.GridPanel中的日期格式设置之前，我们首先简要回顾一下ExtJS是什么以及GridPanel组件的基本功能。ExtJS是一个用JavaScript编写的开源框架，用于构建交互式的Web应用程序，它提供了丰富的UI组件和...
在ExtJS 4中实现两个GridPanel间的数据拖拽功能涉及到了ExtJS框架提供的丰富的组件和插件支持。拖拽功能让用户可以通过交互式地拖动界面元素来执行操作，如移动或复制数据项等。这里的主要知识点是使用ExtJS提供的...
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式：需要在引入js文件夹中的main.js文件 mvc开发模式：需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
在ExtJs中，GridPanel是用于展示表格数据的组件，而`grouping`功能则允许我们将数据按照特定字段进行分组，以便更好地组织和浏览数据。`gridpanel分组后组名排序`是指在对数据分组的基础上，进一步对分组的组名进行...
EXTJS4的GridPanel可以通过Store来管理数据，你需要确保Store已经填充了要导出的数据。 2. **创建CSV字符串**：EXTJS4没有内置的直接导出到Excel的功能，但可以通过生成CSV（逗号分隔值）格式的字符串来模拟这个...
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...