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();

转载于:https://www.cnblogs.com/wuyida/p/6300905.html