Extjs 4 Panel을 Window의 하위 구성 요소로 사용할 때 이중 테두리 문제 해결

Panel, Window 등의 Extjs 컴포넌트는 기본적으로 테두리가 있습니다. 일반적으로 단독으로 사용하면 상관없지만, Window 컴포넌트의 하위 컴포넌트로 사용되는 경우에는 이중 테두리가 나타납니다. 두 개 이상의 패널이 포함되어 있으면 패널과 패널 구성 요소 사이의 테두리가 반복적으로 누적되어 이중 테두리가 됩니다. 사실 이중 테두리는 외관에 큰 영향을 주지는 않지만 다소 불만족스러워 보일 것이므로 이중 테두리를 제거하고 단일 테두리로 바꿀 수 있는 방법을 찾아야 합니다. 아래는 전후 비교 사진 2장입니다. 두 창의 테두리를 유심히 관찰해 보면 전자가 더 두껍고 후자가 더 얇은 것을 알 수 있습니다.

사진1

사진2

이제 해결책을 생각해 보겠습니다.

가장 먼저 생각나는 것은 Window의 테두리를 0으로 설정할 수 있다는 것, 즉 Window 컴포넌트의 속성을 border:false로 설정할 수 있다는 점입니다. 창 주위의 테두리는 단일 테두리로 프로그래밍되어 있지만 창 내부에는 여전히 GridPanel과 아래 패널 사이에 이중 테두리가 있어 조화되지 않은 것처럼 보이며 하단 도구 모음 주위에 테두리가 없습니다(왜냐하면 도구 모음이 "저장" 버튼은 Window에 속해 있으며, Window의 테두리가 사라진 후에는 물론 하단 도구 모음의 테두리에도 영향을 미칩니다. 따라서 이 솔루션은 실현 가능하지 않습니다. 버려라!

두 번째 옵션은 Window 구성 요소의 테두리를 유지하고 Panel의 테두리를 제거하는 방법을 찾는 것입니다. ExtJS의 도움말 문서를 확인해보니 bodyStyle을 정의하여 패널의 스타일을 제어할 수 있다는 것을 알았습니다. 따라서 위 패널에 대해 각각 bodyStyle 속성을 설정합니다(GridPanel: bodyStyle: 'border-width:1px 0 1px 0;' 및 하단 패널: bodyStyle: 'border-width:1px 0). 0 0 ; background:transparent', 새로고침하여 효과를 다시 살펴본 결과 테두리가 실제로 프로그래밍되었지만 테두리가 깨졌지만 여전히 이중 테두리가 있는 것을 발견했습니다. 위의 GridPanel 헤더 측면과 헤더의 양쪽 측면입니다. 이 방법은 비교적 안정적입니다. 주의 깊게 수정해보겠습니다. 다음 단계는 각 패널에 대한 cls 속성을 정의한 다음 자신만의 스타일을 작성하여 헤더 및 헤더 스타일을 제한하는 것입니다. 즉, ExtJS 기본 스타일을 덮어씁니다(테두리 스타일만 수정). Chrome의 "Inspect Element"를 통해 테이블 ​​헤더의 기본 CSS 스타일 클래스는 x-grid-header-ct이고 패널의 기본 스타일 클래스는 x-panel-header임을 확인했습니다. 다음으로 해야 할 일은 자신만의 스타일을 작성하여 이전 스타일을 덮어쓰는 것입니다. 예를 들어 두 패널에 대해 설정한 cls는 addr-panel이고 새 CSS 스타일 클래스 .addr-panel .x를 추가합니다. -grid-header-ct {테두리 너비: 1px 0 0 0 !important;}, .addr-panel .x-panel-header{border-width:0;}. 저장 후 새로고침하여 효과를 확인해보세요. 그림 2의 효과입니다. 완료!

앞으로 비슷한 문제가 발생하면 CSS 스타일을 사용하여 문제를 해결할 수 있습니다. (끝)^_^