ExtJS:GridPanel之renderer:function()和itemdblclick : function()方法参数详解
要使用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();
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。