如何设置才能够:让Ext.grid.Panel组件表头部分有特殊意义的某些列标题字段单元格设置不同的背景色?
或者能够让整个列都带有不同的背景色也行
columns: [
{header:'位置', dataIndex: 'positioin',width:100,align:"center"},
{header:'ID', dataIndex: 'id',width:100,align:"center",cls:'green_column'},
..]
标题颜色的问题已经解决啦 展开
/**
渲染单元格背景统一函数
*/
function getBackgroundColor(color,fn){
return function() {
arguments[1].style+='background-color:'+color+';';
if(Ext.isFunction(fn)){
return fn.apply(this, arguments);
}
return arguments[0];
};
}
Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott", seniority:7, dep:"Management", hired:"01/10/2004"},
{firstname:"Dwight", lastname:"Schrute", seniority:2, dep:"Sales", hired:"04/01/2004"},
{firstname:"Jim", lastname:"Halpert", seniority:3, dep:"Sales", hired:"02/22/2006"},
{firstname:"Kevin", lastname:"Malone", seniority:4, dep:"Accounting", hired:"06/10/2007"},
{firstname:"Angela", lastname:"Martin", seniority:5, dep:"Accounting", hired:"10/21/2008"}
]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname',
//每一列都这样加个渲染函数
renderer:getBackgroundColor('red',function(value,meta){
//自定义函数操作，与普通的渲染函数一样允许任意修改
meta.style='background-color:yellow;';
return 'aaaa';
})
},
{text: 'Last Name', dataIndex:'lastname'},
{text: 'Hired Month', dataIndex:'hired', xtype:'datecolumn', format:'M'},
{text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({seniority})'}
],
width: 400,
forceFit: true,
renderTo: Ext.getBody()
});
由图可以看到，虽然我getBackgroundColor取的是红色red，但因为自定义渲染函数里又重新修改成黄色，所以最终还是取决于自定义渲染函数
