본문 바로가기
Javascript/ExtJS

Tab bar는 남겨두고 하위 패널만 접고 싶은데?

by 스빠시빠 2018. 8. 21.

우선 config상에는 해당 기능이 없다.

그럼 어디?

직접 구현해야 한다.

그래서 내가 구현한 방향에 대해서만 설명하려고 한다.

구현하려는 UX는 "Visual Stuido Code" 에디터의 왼쪽 네비게이션 사이드 바 이다.

(다른 탭을 누르면 이동하고 자기자신의 탭을 클릭하면 탭패널이 접힌다.)




  1. Tab Click 이벤트 핸들러 필요
  2. Tab Change 이벤트 핸들러 필요
  3. Tab은 사실상 button 컴포넌트를 확장 시킨 컴포넌트, 그러므로 enableToggle config 사용

위의 3가지 사항은 준비사항.

Tab Click

자기 자신의 탭만 Collapse/Expand 시키는게 포인트. 즉, 현재 탭에서 다른 탭으로 이동 시에는 현재 탭 값만 변경. Collapse/Expand는 너비 값 조정으로 이루어진다.

Tab Change

각 탭이 가지고 있는 하위 패널의 너비를 복원 시켜준다. 원본 너비는 쉽게 구할 수 있음.

너비 값만 주의해서 맞춰주면 끄-읕

더 쉽고 간단한 방법이 있으면 알려주세요!


댓글