EXTJS网格行着色失败

我使用的是extjs 3.2。我只参考http://skirtlesden.com/articles/styling-extjs-grid-cells尝试过一个网格行着色示例。在gridExample.js文件中添加网格视图配置，该文件持有静态网格。EXTJS网格行着色失败

viewConfig: { 
    stripeRows: false, 
    getRowClass: function(record) { 
     return record.get('age') < 18 ? 'child-row' : 'adult-row'; 
    }

并在html页面中添加了CSS。

HTML代码，

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>success</title> 
<link href="/testing/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
<link href="/testing/ext/resources/css/test.css" rel="stylesheet" type="text/css" /> 
<style> 
.child-row .x-grid-cell { 
    background-color: #ffe2e2; 
    color: #900; 
} 
.adult-row .x-grid-cell { 
    background-color: #e2ffe2; 
    color: #090; 
} 
</style> 
<script src="/testing/ext/adapter/ext/ext-base.js"></script> 
<script src="/testing/ext/ext-all.js"></script> 
<script src="/testing/JS/gridExample.js"></script> 
</head> 
<body> 
</body> 
</html>

但网格行的颜色没有改变。大多数论坛都确定代码。那么，在html页面中使用css会有什么问题吗？提前致谢。

来源

2013-07-23 Muthuramu Periyaiah

分机3.x的使用形式x-grid3-...的CSS类网格元件。您可以检查this 3.2 example的标记以供自己查看。

所以，你的CSS应该是：

.child-row .x-grid3-cell { 
    background-color: #ffe2e2; 
    color: #900; 
}

来源

2013-07-24 22:49:30 rixo

非常感谢你rixo。 –

我不得不将!important添加到这些属性以获得与工作类似的东西。

.child-row .x-grid-cell { 
    background-color: #ffe2e2 !important; 
    color: #900 !important; 
}

来源

2013-07-23 11:17:58 kevhender

感谢您的答复kevhender。没有工作。我自己尝试过。 “！重要”它说; “这很重要，忽略后续的规则，以及任何常见的特殊性问题，都适用这个规则！” –

您是否肯定该课程正在应用于该行？你有没有通过检查证实这一点？ – kevhender

是的，我是积极的。我使用调试器，并将类分配给每一行。但没有颜色变化:( 是否有可能与Extjs 3.2版本的问题？coz http://skirtlesden.com/articles/styling-extjs-grid-cells被提及extjs 4 –

EXTJS网格行着色失败

回答

相关问题