Ext gridtable

1.加载数据时改变列的颜色。这种方式是通过Ext.grid.ColumnModel中某一列的renderer 函数来实现的。
首先定义一个样式如下：
.x-grid-record-gray{
background: #c3daf9;
}

定义改变颜色的列，加上renderer 渲染函数：
{header:’摘要’,dataIndex:’zhaoyao’,align:’left’,width:150,
renderer : function(value, m){
m.css=’x-grid-record-gray’;
return value;
}
}
2.加载数据完成后改变行的颜色：
首先要解决的一个问题是如果判断数据已经加载完毕，最简单的方法是给grid的store添加onload事件。
如果你想有条件地改变某行的背景颜色，则还需要遍历gird的store，这里有个简单的方法即store的
each方法。看下面这个例子：
grid.getStore().addListener(‘load’,handleGridLoadEvent);
function handleGridLoadEvent(store,records) {
var girdcount=0;
store.each(function(r){
if(r.get(‘STORESUSEDQTY’)==0){
grid.getView().getRow(girdcount).style.backgroundColor=’#c3daf9′;
}
girdcount=girdcount+1;
});
}

3.使用Ext本身的颜色渲染效果

在grid中配置stripeRows为true，可以实现隔行变色，但不能达到根据不同记录集实现不同颜色的显示效果.
说完上面常见的几种方法之后，在来结合项目中的需求来实现背景颜色变色。现在项目中的Ext grid表格是三方公司用代码更具配置文件动态生成的，其代码都封装了一个动态命名的命名空间里，JavaScript代码写在了页面上。我只能在这个Ext grid代码生成之后获得一个grid引用。
下面是部分代码：
Ext.namespace(‘BO_PC_REQUIRE_S’);
BO_PC_REQUIRE_S.Grid=function(){
currentRowInd=0;
currentColInd=0;
var AWS_GRID_CHECK;
var AWS_FORM;
var AWS_GRID_DS_PLANT;
var AWS_GRID_DS;
var AWS_GRID_CM;
var AWS_GRID_PANEL;
return {
perPage: 50,
currentRowInd:0,
currentColInd:0,
init : function(){
},
getDataSource: function() {
return AWS_GRID_DS;
},
getGridPanel: function() {
return AWS_GRID_PANEL;
},
getCurrentRowInd: function() {
return currentRowInd;
},
getCurrentColInd: function() {
return currentColInd;
},
getTitle: function(){
return ‘采购需求单子表（设计师）’;
},
saveData: function(){
if(typeof(outerDoSaveGrid)==’function’){return outerDoSaveGrid();}
},
setCellValue: function(f,v,r){
var rowInd=currentRowInd;
if(r!=undefined)rowInd=r;
AWS_GRID_DS.getAt(rowInd).set(f,v);
},
getCellValue: function(f,r){
var rowInd=currentRowInd;
if(r!=undefined)rowInd=r;
return AWS_GRID_DS.getAt(rowInd).get(f);
}
}//End return
});

4.首先在extjs 里的ext-all.css样式里任意写一个样式，
如：
.x-grid-record-blue table{color:blue;}
.x-grid-record-green table{color:green;}
.x-grid-record-red table{color:red;}

viewConfig:{
forceFit:true,
enableRowBody:true,
getRowClass:function(record,rowIndex,p,ds)
{
if(record.get("alert_level")==1)
{
return 'x-grid-record-green';
}
else return '';
}
},