EXTJS中Ext.grid.Panel根据行号设置颜色

Question

css样式，这个是改背景颜色的：.child-row .x-grid-cell { background-color: #F08080; color: #000000; }
.adult-row .x-grid-cell { background-color: #ffffff; color: #000000; }
Ext grid配置，这里是按奇数和偶数行来设置颜色的，因为你没说清楚你要怎么设置：viewConfig : {
getRowClass :（ record, rowIndex, rowParams, store ）{
return rowIndex % 2 == 0 ? 'child-row ': 'adult-row';
}
}
ExtJS API about the function getRowClass:
http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.view.Table-method-getRowClass下面是.x-grid-cell的所有配置项，你可以自己改：
x-grid-cell{color:null;font:normal 11px tahoma, arial, verdana, sans-serif;background-color:white;border-color:#ededed;border-style:solid;border-width:1px 0;border-top-color:#fafafa}

Answer 1

有没有一个类似
getRow(rowIndex).setCss
或者
getRow(rowIndex).setColor
来设置颜色呢?
因为我在getRowClass里面不能及时确定我要的颜色
用return样式名来做的话,我需要等待一个同步请求
我的单页面显示25条记录,这样就要等25次
会卡3,4秒

Answer 2

你的意思是行的颜色是由后台一次性传过来确定的对吧，有两种方法可以解决1是把颜色值放入store的一个字段中，因为其实数据定了颜色也就定了，这样就可以同步处理了，你的列模型中不用这个颜色字段就行了，这比较简单。2。在任然按你的做，在颜色值ajax传过来success中刷新view，让grid重新渲染取出颜色值设置css。

Answer 3

你的意思是行的颜色是由后台一次性传过来确定的对吧，有两种方法可以解决1是把颜色值放入store的一个字段中，因为其实数据定了颜色也就定了，这样就可以同步处理了，你的列模型中不用这个颜色字段就行了，这比较简单。2。在任然按你的做，在颜色值ajax传过来success中刷新view，让grid重新渲染取出颜色值设置css。
你说的第二种方法,具体如何来做呢?getRowClass : function(record,rowIndex,rowParams,store){
var order_id = record.data.order_id;
var url = "......";//根据该行order_id来确定颜色,颜色信息与列表信息不在一个表里面,所以store里面没有,需要这样另行查询一次!郁闷!
Ext.Ajax.request({
method: "GET",
url: url,
success: function(response) {
//根据结果
if(红色){
//这一行改红色,或使用红色css,怎么做? 
}
if(黄色){
//这一行改红黄,或使用黄色css,怎么做? 
}

},
failure: function(response) {   

} 
}); }

Answer 4

现在有没有简单直接的
getView().getRow(girdcount).style.backgroundColor="#c3daf9";
类似这种根据行号
直接设置颜色,或者设置css的方法呢?

Answer 5

Ajax放到grid的load事件中，
success: function(response) {
  //从response中解出colors，放到一个grid能读取的变量中;
  //找到grid,然后grid.getView().refresh();
}
改变颜色任然写在viewConfig 中：viewConfig : {
getRowClass :（ record, rowIndex, rowParams, store ）{
return colors[rowIndex];
}
}

Answer 6

其实推荐你使用第一种方法，Ajax都不用写了，直接在viewConfig 的record取出颜色字段的值设置css返回就行了。
viewConfig : {
    getRowClass :（ record, rowIndex, rowParams, store ）{
        return colors[rowIndex];
        }
}

Answer 7

做不到啊,在这个grid里面对应的数据,是没有颜色的
我需要根据这个表里面每一条记录的order_id,调用另一个接口,返回颜色
每一行都需要一次ajax请求

Answer 8

你前台Ajax都可以调用，难道后台还不能根据order_id,调用另一个接口,返回颜色

Answer 9

那个问题已经解决了,改变了后台传来的数据现在有个新问题
鼠标经过和选中一行记录时,该行颜色会改变
boss不希望颜色改变..这个如何设置??
能在viewConfig里面做么

Answer 10

有没有一个类似
getRow(rowIndex).setCss
或者
getRow(rowIndex).setColor
来设置颜色呢?
因为我在getRowClass里面不能及时确定我要的颜色
用return样式名来做的话,我需要等待一个同步请求
我的单页面显示25条记录,这样就要等25次
会卡3,4秒那你这个颜色是怎么确定的，没有一定逻辑去确定么？

Answer 11

在你的grid配置中增加以下代码
trackMouseOver    : true,
listeners         : {
   rowclick: function(grid, rowIndex,  e){
        var record = grid.getSelectionModel().getSelected();
  var idx = grid.store.indexOf(record);
  var row = grid.getView().getRow(idx);
  var element = Ext.get(row);
          // 删除选择CSS
  element.removeClass('x-grid3-row-selected');
    }, this);
}

Answer 12

错了trackMouseOver    : false,
listeners         : {
   rowclick: function(grid, rowIndex,  e){
        var record = grid.getSelectionModel().getSelected();
  var idx = grid.store.indexOf(record);
  var row = grid.getView().getRow(idx);
  var element = Ext.get(row);
          // 删除选择CSS
  element.removeClass('x-grid3-row-selected');
    }, this);
}

Answer 13

谢了,我直接在ext-all.js里面把
鼠标悬停时的行样式x-grid-row-over里面的backgroundcolor给去掉了
鼠标悬停没有颜色了
还是谢谢各位