Ext Grid 小细节收集

1. columns 中的renderer参数
renderer:function (value, cellmeta, record, rowIndex, columnIndex, store) {  

//value :这个单元格的值;

//cellmeta.cellId: 这个单元格的配

//cellmeta.id:  id

//record :这个单元格对应的record 

//rowIndex 这是第几行

//store 这个表格对应的Ext.data.Store

} 


Ext Grid 小细节收集_第1张图片

Ext Grid 小细节收集_第2张图片

2. EditorGridPanel中显示Combobox的值
会存在combobox中选择了相应的选项时(displayField),在grid中却显示了valueField值的情况
一般可以通过下面的方式解决
// 下面是columns的一个子项
// 通过renderer控制表格显示的值
{  
        header: '用户名',  
        sortable: true,
        dataIndex: 'userId',
        editor:userCombo,
        renderer:gridUserNameShow 
}


 /**
  * 修正grid的用户名显示值问题
  */
 function gridUserNameShow(value, cellmeta, record, rowIndex, columnIndex, store){
 	// 如果有过滤,则必须先进行清空   其他地方同时有可以对baseUserInfo进行过滤,必须先清除
 	if (baseUserInfo.isFiltered()) {
 		baseUserInfo.clearFilter();
 	}
 	// 通过传递进来的value来查找位于Store的位置
 	index = baseUserInfo.findBy(function(record, id) 
		{ 
			return record.get(Ext.getCmp('userCombo').valueField) == value; 
		}); 
	//  查找到对应的记录,并且取出值	
	var records = baseUserInfo.getAt(index);
	if (records == null) {
		return value;
	}else{
		return records.data.userCn;
	}
 }



1. 动态生成列信息
var colMArray = new Array();
//colcnList 列明数组
//colenList 对应stroe的dataIndex数组
//colwdList 对应的宽度信息 
//上面三则长度一致
    colMArray[0] = expander;
    for (var i = 0,index; i < colcnList.length; i++) {
    	index = colMArray.length;
    	colMArray[index] = {header:colcnList[i],dataIndex:colenList[i],width:colwdList[i]};
    	if (colcnList[i] == '设备编号') {
    		colMArray[index].renderer = setUrl;//添加renderer 等其他信息
    	}
    }
    var cm = new Ext.grid.ColumnModel(colMArray);

你可能感兴趣的:(grid)