Extjs grid设置单元格背景色

[zyf03160214]

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

[仔仔小河]

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; }); }); 照着试试看

[zyf03160214]

引用 1 楼 Renita 的回复:

grid.getStore().on('load',function(s,records){ // var girdcount=0; s.each(function(r){ if(r.get('change')<0){ grid.getView().getRow(girdcoun……

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

[仔仔小河]

把你的界面代码都贴出来看看下

[zyf03160214]

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的 背景为红色

[仔仔小河]

引用 4 楼 zyf03160214 的回复:

JavaScript code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990……

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

[yibey]

一般建议 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
          ....
}

[人中赤兔马中吕布]

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

[zyf03160214]

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

[仔仔小河]

引用 8 楼 zyf03160214 的回复:

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

那你试试给你参考网址里的第一个方法试试咯，目测最可行

[人中赤兔马中吕布]

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