要使用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="红男"; 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 itemitem : HTMLElement The item's elementindex : Number The item's indexe : Ext.EventObject The raw event objecteOpts : 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();