参考资料：http://www.qeefee.com/article/extjs-grid-in-detail
创建GridPanel
要使用GridPanel，首先要定义Store
// 创建store
var store = Ext.create("Ext.data.Store", {
fields: [{
name: 'name', // 与gird中columns的dataIndex匹配
type: 'string', // 字段的数据类型
mapping: 'name' // 在Ext.data.Reader中创建记录时将json对象中指定属性值映射到此字段
},{
name: 'age',
type: 'int',
mapping:'age'
},{
name: 'phone',
type: 'string',
mapping:'phone'
}],
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "queryUsers.action",
reader: {
root: "rows"
},
extraParams: {state : 2}
},
sorters: [{
property: "age",//排序字段
direction: "asc"
}]
});
// 创建grid
var grid = Ext.create("Ext.grid.Panel", {
title: '用户列表',
xtype: "grid",
store: store,
width: 500,
height: 200,
margin: 30,
columnLines: true,
hidden : false,
viewConfig : {
forceFit : true
},
renderTo: Ext.getBody(),
// renderTo: userDiv, // 将grid填充到jsp页面的div中，div的id为userDiv
selModel: {
injectCheckbox: 0,
mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},
selType: "checkboxmodel",
columns: [{
text: '姓名',
dataIndex: 'name'
},{
text: '年龄',
dataIndex: 'age',
xtype: 'numbercolumn',
format: '0',
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},{
text: '电话',
dataIndex: 'phone',
editor: "textfield"
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
listeners: {
itemdblclick: function (me, record, item, index, e, eOpts) {
//双击事件的操作
}
},
bbar : new Ext.PagingToolbar( {
store : store,
displayInfo : true,
nextText : '下一页',
lastText : '最后一页',
firstText : '第一页',
prevText : '上一页',
refreshText : '刷新',
displayMsg : '显示流程实例第 {0}条 - 第 {1}条，总共{2}条',
emptyMsg : "没有数据"
}),
tbar : Ext.create("Ext.Toolbar", {
items:[ {
text : "查看用户详细信息",
handler : lookDetail //方法名后面不能加括号，lookDetail()的写法是错误的。
}, {
text : "查看用户子节点",
handler : lookChildren
}]
})
});
function lookDetail() {
//得到选中的行数据
var record = grid.getSelectionModel().getLastSelected();
var name = record.data.name;
//其他操作...
}
function lookChildren() {
//...
}
列 Columns配置项
Extjs GridPanel的列有多种类型，例如：文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。
下面是列的常用配置项：
- xtype：列类型
- text：列头显示的文字
- dataIndex：绑定的字段名
- width：宽度
- flex：自动适应的宽度
- sortable：是否可排序，默认为是
- hideable：是否可隐藏，默认为是
- locked：锁定列，将列锁定在grid的开头，当grid出现滚动条的时候该属性比较有用。默认为否
- lockable：是否可锁定，默认为否
- format：格式化字符串，常用于日期、数字的格式化。日期：'Y-m-d'；日期时间：'Y-m-d H:i:s'；数字：'0,000.00'（带有千位分隔符、保留两位小数）、'0.00'（保留两位小数），'0'（不保留小数）
- renderer：自定义绘制方法，可以是Ext.util.Format中定义好的方法名称，也可以是自定义否function，该方法接收下面的参数：value、metadata、record、rowIndex、colIndex、store、view，并需要一个用来显示的返回值。
- editor：编辑器，当使用编辑插件的时候才会起作用。
Extjs GridPanel行选择模型（SelectionModel）
控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下，selType为rowmodel，对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框，它通过点击行进行选中，默认为多选“MULTI”。
如果我们要使用复选框来选择行，我们需要使用下面的配置：
selType: "checkboxmodel", //rowmodel、checkboxmodel
然后，我们可以通过selModel来配置selType：
selModel: {
injectCheckbox: 0,
mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},
Extjs GridPanel行选择
除了界面操作来选中行，我们还可以通过代码来选中行：
//选择行，并保持其他行的选择状态 grid.getSelectionModel().select(records, true); //选择所有 grid.getSelectionModel().selectAll(); //根据row index选择 grid.getSelectionModel().selectRange(startRow, endRow, true)
Extjs GridPanel获取选中行
获取选中行，仍然需要通过SelectionModel来完成：
var records = grid.getSelectionModel().getSelection(); var records = grid.getSelectionModel().getLastSelected();
Extjs GridPanel显示行号
默认情况下Extjs GridPanel是不显示行号的，我们需要手动添加行号列。
columns: [{
xtype: "rownumberer",
text: "序号",
width:40
},{
text: '姓名',
dataIndex: 'name'
},{
text: '年龄',
dataIndex: 'age',
xtype: 'numbercolumn',
format: '0',
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},{
text: '电话',
dataIndex: 'phone',
editor: "textfield"
}]
我们可以设置行号的列头和宽度。
Extjs GridPanel异步加载数据
Extjs GridPanel的异步加载数据是通过Store来实现的。
异步加载通常采用ajax代理，例如我们代码中用到的：
//创建store
var store = Ext.create("Ext.data.Store", {
fields: [{
name: 'name', // 与gird中columns的dataIndex匹配
type: 'string', // 字段的数据类型
mapping: 'name' // 在Ext.data.Reader中创建记录时将json对象中指定属性值映射到此字段
},{
name: 'age',
type: 'int',
mapping:'age'
},{
name: 'phone',
type: 'string',
mapping:'phone'
}],
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "queryUsers.action",
reader: {
root: "rows"
},
extraParams: {state : 2}
},
sorters: [{
property: "age",//排序字段
direction: "asc"
}]
});
服务器端返回的数据格式如下：
{
"rows": [
{
"name": "Tom",
"age": 12,
"phone": "1233455"
},
{
"name": "Jerry",
"age": 12,
"phone": "1233455"
},
{
"name": "Sinbo",
"age": 12,
"phone": "1233455"
},
{
"name": "Jack",
"age": 12,
"phone": "1233455"
},
{
"name": "Johnson ",
"age": 12,
"phone": "1233455"
}
],
"total": 5
}
手动加载：
store.load();
ajax在这里是异步加载，如果要处理返回数据，需要用回调函数
store.load({
callback: function (records, operation, success) {
if (success) {
//对返回数据处理
}
}
});
ExtJS 其实已经为我们添加了一些参数，包括 page、start和limit。这些参数是从哪儿来的呢？
在使用ajax进行请求的时候，ajax代理会调用自身的read方法，该方法的第一个参数是Ext.data.Operation 类型，它用来配置我们如何进行请求。我们在load 方法中可以通过配置项传递一些参数，load在调用read方法时将这些参数传递过去，read则会根据这些参数生成Ext.data.Operation 的一个实例。所以，我们可以这样来传递参数：
store.load({
page: 2,
limit: 10,
params: {
name: 'Jack' //其他参数
},
callback: function (records, operation, success) {
if (success) {
//...
}
}
});
Extjs GridPanel分页
当GridPanel中数据量大的时候，我们就需要使用分页了。
分页的实现由两部来完成，首先是在Store中添加pageSize配置项，用来确定每页显示多少行数据；然后需要为GridPanel添加PagingToolbar。
1. Store添加pageSize配置项
在分页参数加上之后，Extjs在执行ajax请求的时候会添加三个参数：
- page：当前页
- start：起始行的行号
- limit：每页数据行数，默认为25；这个参数值就是我们设置的pageSize
2. GridPanel添加PagingToolbar
在完成这两项配置以后，GridPanel就可以使用分页了。
Extjs GridPanel列编辑
Extjs GridPanel可以方便的实现列编辑。要实现这个功能需要两步：
1. 添加GridPanel的编辑插件
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
2. 为需要编辑的列指定编辑器
columns: [
{ xtype: "rownumberer", text: "序号", width:40 },
{ text: '姓名', dataIndex: 'name' },
{
text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},
{ text: '电话', dataIndex: 'phone', editor: "textfield" }
]
编辑器可以是一个field的配置，也可以是一个xtype。
对于编辑后的单元格，会在左上角出现一个红色的标识，说明该数据是编辑过的，要想去掉这个红色箭头，需要调用record的commit()方法。
grid.on('edit', function (editor, e) {
// commit the changes right after editing finished
e.record.commit();
});
除了单元格编辑外，Extjs还支持行编辑功能，只需要将插件替换为RowEditing即可，此处不再进行演示。
Extjs GridPanel选中单元格内容
在默认情况下，Extjs GridPanel不允许进行选中单元格中的内容，由于不能选中，我们就不可能来复制单元格中的内容。如果要实现这种功能，我们需要通过viewConfig来实现。
代码如下：
viewConfig:{
stripeRows:true,//在表格中显示斑马线
enableTextSelection:true //可以复制单元格文字
}
禁止显示列头部右侧菜单
Extjs GridPanel的列，当我们点击列头的时候，会出现一个菜单：
如果我们要禁用这个菜单，可以将每个column定义属性menuDisabled指定为true，代码如下：
{header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}
Extjs GridPanel 事件
itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e ) //鼠标的单击事件
itemcontextmenu( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e ) //鼠标的右键事件
itemdblclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e ) //鼠标的双击事件
itemmousedown( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )
itemmouseenter( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )
itemmouseleave( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )
itemmouseup( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e )
调用方法：
直接调用，创建grid时添加listeners
listeners:{
'itemclick':function(view,record,item,index,e){
}
后续添加
grid.addListener('itemclick',click,this);
function click(view,record,item,index,e){
if (typeof (record.raw) != 'undefined') {
name= record.raw.NAME; //获取单击行的相应数据
path= record.raw.PATH;
num = index;
}
}