Extjs grid设置单元格背景色

Question

根据后台数据来设置单元背景色，如图：
假如我要做个company等于1时，单元格背景色为红色，应该怎么做？最好具体点，刚做Ext没几天。

Answer 1

grid.getStore().on('load',function(s,records){
   //     var girdcount=0;
        s.each(function(r){
            if(r.get('change')<0){
                grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00';
            }else {
                grid.getView().getRow(girdcount).style.backgroundColor='#DCDCDC';
            }
  //          girdcount=girdcount+1;
        });
    });照着试试看

Answer 2

不行啊，他提示我 TypeError: grid.getView(...).getRow is not a function

Answer 3

var Market = Ext.create("Ext.grid.Panel",{
id:'Market',  
title:'报价',
split:true,
frame : true,
region:'north',
border:false,
padding:0,
forceFit : true,
width:'20%',      
height:500,
columns : [ 
{text:"Name",dataIndex:'name'},
{text:"age",dataIndex:'age', renderer :change},
{text:"email",dataIndex:'email'},
],
viewConfig: {
stripeRows: true,
listeners: {
itemcontextmenu: function(view, rec, node, index, e) {
e.stopEvent();
contextMenu.showAt(e.getXY());
return false;
}
},
},
store : store,
});
var updateNnm= function () {

$.get("data.php", function(data) {

array = eval(data);

for(var i = 0;i<array.length;i++){
  
  var returnDate = array[i];
  
  var record = Market.getStore().getById(returnDate.id);
  
  record.set("age",returnDate.age);
  
  record.commit();
 }
}) 
}; var runner = new Ext.util.TaskRunner(); var task = runner.start({
 run: updateNnm,
 interval: 1000,
 });
   var vp=new Ext.Viewport({  
    layout:"border", 
id:"one",
padding:10, 
        items: [{
            xtype: 'box',
            id: 'header',
            region: 'north',
            height: 50,
contentEl :"head",

        },{
            layout: 'border',
            id: 'layout-browser',
            region:'west',
            border: false,
            split:true,
            width: '20%',
            minSize: 100,
            maxSize: 500,
            items: [Market, Account]
        }, 
{
            layout: 'border',
            id: 'layout1-browser',
            region:'center',
            border: false,
            split:true,
            width: '80%',
            items: [Favorite, Order,Chart]
        }, 
        ],
    }); store.on('load',function(s,records){
        var girdcount=0;
        s.each(function(r){
            if(r.get('age')>0){
               Market.getView().getRow(girdcount).style.backgroundColor='#F00';
            }
            girdcount=girdcount+1;
        });
    });
比如说我让你年龄大于0的 背景为红色

Answer 4

你这是成功还是没有成功呀~
参考一下这个
http://www.cnblogs.com/sky100/articles/1598391.html

Answer 5

一般建议columns : [ 
        {text:"Name",dataIndex:'name'},
        {text:"age",dataIndex:'age', renderer :change},
        {text:"email",dataIndex:'email'},       
    ],在这里做。
其中有一个属性是renderer表示该值在这个列渲染成什么样子的
比如楼上的change
那么就顶一个change函数var change = function (v,...)//这里第一个参数就是value就是表示该列对应的store的值
{
     if(v>0)
          return"<div style ='color:red'>"+v+"</div>"
     else
          ....
}

Answer 6

如果只是某一列的话
可以再column上声明
renderer: function(value){
        if (value === 1) {
            return '<span style="color:green;">' + value+ '</span>';
        }
           return '<span style="color:red;">' + value+ '</span>';
    }
这个才是官方推荐的写法

Answer 7

想做这种整行的背景颜色，不是单独某个单元格，给store 添加onload方法 总是出现
TypeError: 
Market.getView().getRow(girdcount).style.backgroundColor='#F00';这种错误

Answer 8

整行的话
viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store){
        return record.get("valid") ? "row-valid" : "row-error";
    }
}
根据record等获取数据，然后自己判断
各种情况返回不同的css样式名
然后再css定义这些样式即可