要使用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();