2013-07-23 2 views
0

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에 어떤 문제가 있습니까? 미리 감사드립니다.

답변

1

내선 3.x의 격자 요소의 형태 x-grid3-... CSS의 클래스를 사용한다. 자신을 위해 this 3.2 example 님의 마크 업을 검사 할 수 있습니다.

그래서, 당신의 CSS는해야한다 : 당신의 응답 kevhender에 대한

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

대단히 rixo. –

0

작업과 비슷한 것을 얻으려면이 속성에 !important을 추가해야했습니다.

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

감사합니다. 일하지 않았다. 나는 그 자체로 이것을 시도했다. "! important"라고 말합니다. 이것은 중요하며, 이후의 규칙을 무시하고, 일반적인 특수성 문제는이 규칙을 적용합니다! ' –

+0

클래스가 행에 적용되고 있습니까? 검사를 통해 이것을 확인 했습니까? – kevhender

+0

옙 나는 긍정적이다. 나는 모든 행에 할당 된 디버거와 클래스를 사용했다. 하지만 색상의 변화가 없습니다 : ( Extjs 3.2 버전 문제는 무엇입니까? coz http://skirtlesden.com/articles/styling-extjs-grid-cells 언급 extjs 4 –