要使用GridPanel，首先要定义Store，而在创建Store的时候必须要有Model，因此我们首先来定义Model：
Ext.define("Gpsdata", {
extend: "Ext.data.Model",
fields: [
{ name: ‘gpstime‘, type: ‘string‘ },
{ name: ‘gpstemp‘, type: ‘string‘ }
]
});
然后创建Store：
var surfacestore = new Ext.data.Store({
model : ‘Gpsdata‘,
pageSize : 22,
proxy : {
type : ‘ajax‘,
url : ‘gpsdata/grid‘,
reader : {
type : ‘json‘,
root : ‘dataOfAll‘,
totalProperty : ‘total‘
}
},
listeners : {
beforeload : function(store, operation, opts) {
Ext.MessageBox.show({
title : ‘请等待‘,
msg : ‘数据读取中……‘,
width : 240,
progress : true,
closable : false
});
Ext.MessageBox.wait(‘数据读取中……‘, ‘‘, {
duration : 900000,
interval : 500,
increment : 10,
scope : this,
fn : function() {
}
});
},
load : function(store, records, successful, opts) {
if (successful) {
Ext.MessageBox.hide();
} else {
Ext.MessageBox.hide();
}
}
}
});
创建GridPanel
var surfacegrid = Ext.create(‘Ext.grid.Panel‘, {
id: ‘surface‘,
title: ‘数据列表展示‘,
store: surfacestore,
disableSelection: true,
loadMask: true,
viewConfig: {
trackOver: false,
stripeRows: false
},
columns:[
new Ext.grid.RowNumberer(),{
text: "时间",
dataIndex: ‘gpstime‘,
sortable: true,
flex: 3
},{
text: "水温"+‘(℃)‘,
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
//value="<span style=‘color:red;font-weight:bold;‘>红男</span>";
return value;
},
dataIndex: ‘gpstemp‘,
flex: 2
}],
listeners: {
itemdblclick : function(view, record, item, index, e, eOpts) {
var gpsname=record.get(‘gpsname‘);
//alert(gpsname);
}},
bbar: Ext.create(‘Ext.PagingToolbar‘, {
store: surfacestore,
displayInfo: true,
displayMsg: ‘显示监测数据 {0} - {1} of {2}‘,
emptyMsg: "无数据"
})
});
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ }
解析：
value:将要像是单元格里的值，即dataIndex的值
cellmeta:单元格的相关属性，主要是id和CSS
record：这行的数据对象。通过record.data[‘id‘]方式得到其他列的值
rowIndex:行号
columnIndex:当前列的行号
store:构造表格时传递的ds，也就是说，表格里所有的数据都可以通过store获得。
listeners: {itemdblclick : function(view, record, item, index, e, eOpts) { }}
解析：
view:Ext.view.View
record : Ext.data.Model The record that belongs to the item
item : HTMLElement The item‘s element
index : Number The item‘s index
e : Ext.EventObject The raw event object
eOpts : Object The options object passed to Ext.util.Observable.addListener.
Extjs GridPanel的列
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",
然后，我们可以通过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();