Ext.grid.GridPanel隔行显示不同的背景颜色

Ext.grid.GridPanel可以设置stripeRows: true的属性来实现隔行换颜色的效果，如果你想自定义每行的颜色，那么你可以按照下边地方法来实现：

Ext.ux.GridView=Ext.extend(  
       Ext.grid.GridView,  
       {  
           getRowClass:function(record,index)  
           {  
               if(index%2==0)  
                   return 'red';  
               else  
                  return 'green';  
          }  
       }  
   )  

使用自定义的view

var grid = new Ext.grid.GridPanel({
        //other code
	store: store,
	view:new Ext.ux.GridView(),
        //other code
});

样式定义：

.red {
     background-color:#FF0000;
}
.green {
     background-color:#00FF00;
}

通过firebug可以看到，给每行的div添加了自定义的样式

评论

1 楼 sunjilu05 2010-03-10  

dear love4j,


stripeRows : Boolean
true to stripe the rows. Default is false.
This causes the CSS class x-grid3-row-alt to be added to alternate rows of the grid. A default CSS rule is provided which sets a background colour, but you can override this with a rule which either overrides the background-color style using the '!important' modifier, or which uses a CSS selector of higher specificity.