마이크로 모드에서 ExtJs treelist의 메뉴 위로 마우스를 가져 가면 스타일을 바꿀 수 있습니다.

Question

Ext js 6.2.1 Treelist을 사용하고 있습니다. 주방 싱크는 link입니다.

Extjs treelist 항목의 스타일을 수정했습니다. 보통 모드 (마이크로 = 거짓)에서는 다른 배경색, 패딩 등으로도 모양이 좋아 보이지만 트리 목록이 마이크로 모드 (마이크로 = true)이고 아이콘 위로 마우스를 가져 가면 메뉴가 기본 스타일로 나타납니다.

내가 가져갈 때 나타나는 메뉴에서 동일하거나 다른 스타일을 적용하려면 어떻게해야합니까?

DOM을 보는 것은 정렬되지 않은 동일한 목록 항목이 툴팁에 마우스를 올려 놓은 상태로 표시되기 때문에 사용하기가 어렵습니다.

이 작업을 수행하는 방법에 대한 통찰력을 얻을 수 있습니다.

Answer 1

마우스를 올려 놓을 때 강조 표시 할 노드를 마우스 오른쪽 버튼으로 클릭하고 '요소 검사'를 클릭하십시오. 해당 요소에 대한 CSS 클래스가 표시됩니다. 요소의 클래스를 적어두고 CSS 파일에서 배경색 속성을 가진 'Inspect element'를 사용하여 찾은 클래스를 추가하십시오.

CSS에서

,

.x-tree-node-text:hover{background-color:blue !important} 

대부분의 예제의 출처는에 extjs에서 다운로드 한 폴더입니다. 참조 할 수있는 'examples'폴더가 있습니다.